月曜日, 3月 24, 2025

HTML_CSS_15　
WebFontのGoogleFontをHTMLで記述手順

WebFontであるGoogleFontをHTMLで記述する手順を整理しました。便宜上CSSはHTML内に埋め込んでいます。

GoogleFont

（1）body内のテキストを全てゴシック体に設定する場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Google Fonts の利用</title>
<!-- Google Fonts の読み込み（例: "Noto Sans JP"）-->
<link href="https://fonts.googleapis.com/css2?family=
Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

<style>
body {
background-color: lightcyan;
font-family: 'Noto Sans JP', sans-serif;
}
h2 {
font-weight: 700; /* bold */
font-kerning: normal; /* 自動カーニング */
color: blueviolet;
}
p {
font-weight: 400; /* Regular */
font-kerning: normal; /* 自動カーニング */
color: green;
}
</style>
</head>
<body>
<center>
<h2>Google Fonts を使ってみる</h2>
<p>webフォントを設定すれば表示フォントを共有できます
</p>
</center>
</body>
</html>

（1）の処理結果／全てNoto Sans Japanese

（2）CSS内で&lt;H&gt;や&lt;P&gt;タグを指定する場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Google Fonts の利用</title>
<!-- Google Fonts の読み込み（例: "Noto Sans JP"） -->
<link href="https://fonts.googleapis.com/css2?family=
Noto+Sans+JP:wght@400;700&family=
Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">

<style>
body {
background-color: lightcyan;
font-family: 'Noto Ssans JP', sans-serif; /* デフォルト */
}
h2 {
font-family: 'Noto Serif JP', serif;
font-weight: 700; /* bold */
font-kerning: normal; /* 自動カーニング */
color: blueviolet;
}
p {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400; /* Regular */
font-kerning: normal; /* 自動カーニング */
color: green;
}
</style>
</head>
<body>
<center>
<h2>Google Fonts を使ってみる</h2>
<p>webフォントを設定すれば表示フォントを共有できます
</p>
</center>
</body>
</html>

（2）の処理結果／上はNoto Serif Japanese、下はNoto Sans Japanese

（3）body内で&lt;H&gt;や&lt;P&gt;タグごとに指定する場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Google Fonts の利用</title>
<!-- Google Fonts の読み込み（例: "Noto Sans JP"） -->
<link href="https://fonts.googleapis.com/css2?family=
Noto+Sans+JP:wght@400;700&family=
Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">

<style>
body {
background-color: lightcyan;
font-family: 'Noto Ssans JP', sans-serif; /* デフォルト */
}
h2 {
font-weight: 700; /* bold */
font-kerning: normal; /* 自動カーニング */
color: blueviolet;
}
p {
font-weight: 400; /* Regular */
font-kerning: normal; /* 自動カーニング */
color: green;
}
</style>
</head>
<body>
<center>
<h2 style="font-family: 'Noto Serif JP', serif;">
Google Fonts を使ってみる</h2>
<p style="font-family: 'Noto Sans JP', sans-serif;">
webフォントを設定すれば表示フォントを共有できます
</p>
</center>
</body>
</html>

（3）の処理結果／上はNoto Serif Japanese、下はNoto Sans Japanese
投稿者 時刻:
ラベル: , , ,