【6日でできるHTML＆CSS入門】Webフォントの利用
Webフォントを使うことで、どんな環境でも一貫した美しい書体をWebサイト上で表現できます。従来は、利用者のOSや端末に依存したフォント表示になっていましたが、Webフォントを導入することで、デザイナーや制作者が意図した通りの文字デザインを実現できるようになりました。
ここでは、Webフォントの基礎知識や、Google Fonts を活用した実践的な利用方法について解説します。
１．Webフォントとは
1.1. フォントの基本
フォントとは、文字の形・太さ・大きさなど、文字デザインのセットのことです。
WindowsやMac、スマートフォンなど、それぞれの端末に標準で搭載されたフォントが異なるため、同じHTMLでも表示される書体が違う場合があります。
1.2. Webフォントの仕組み
Webフォントとは、Webサーバーからフォントデータを取得して、ブラウザ上で表示する仕組みです。
これにより、どんなOSや端末でも同じフォントデザインでWebページを表示できるようになります。
Webフォントには有料・無料のサービスがあり、Google Fontsは代表的な無料Webフォントサービスです。
２．Google Fontsの使い方
2.1. 利用の手順
Google Fontsの利用は簡単です。
基本的な流れは以下の通りです。
１．Google Fonts にアクセス
「https://fonts.google.com/」にアクセスします。
２．好きなフォントを選ぶ
ここでは「Noto Sans JP」を選択します。「Noto Sans JP」を検索します。
「Get font」ボタンをクリックします。
「Get embed code」ボタンをクリックします。
３．埋め込みコードのコピー
右側に表示されたリンクタグをクリックします。
４．コピーした<link>タグをHTMLの<head>内に貼り付ける。
・・・
<head>
・・・
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
・・・
<style>
</head>
・・・５．CSSでfont-familyを指定し、好きな場所でフォントを適用
・・・
font-family: 'Noto Sans JP', sans-serif;
・・・2.2. サンプルHTMLと表示例
たとえば、「Noto Sans JP」という日本語Webフォントを使いたい場合、
以下のようなHTMLになります。
ファイル名： lesson45_1.html
<!DOCTYPE html>
<html>
<head>
<title>Webフォント体験ページ</title>
<meta charset="UTF-8">
<!-- Google Fontsからフォントを読み込み -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<style>
body { font-size: 28px; margin: 40px; }
.webfont-sample {
font-family: 'Noto Sans JP', sans-serif;
color: #2a5d84;
}
.default-sample {
color: #444;
}
</style>
</head>
<body>
<h1>Webフォント表示サンプル</h1>
<p class="webfont-sample">こちらの行はGoogle FontsのWebフォントが使われています。</p>
<p class="default-sample">この行は端末の標準フォントが使われています。</p>
</body>
</html>表示結果
- 「こちらの行はGoogle FontsのWebフォントが使われています。」→ Noto Sans JPフォントで表示
- 「この行は端末の標準フォントが使われています。」→ OS標準のフォントで表示
３．タグ・CSSと使い方のポイント
3.1. Webフォント導入で利用するタグ・属性一覧
| タグ・属性 | 説明・使い方例 |
|---|---|
| <link rel="preconnect" ...> | Google Fontsのサーバへ事前接続し、読み込みを高速化する |
| <link href="..." rel="stylesheet"> | Google FontsのCSSを読み込む |
| font-family（CSSプロパティ） | テキストに適用するフォントファミリーを指定 |
| class（HTML属性） | フォント適用用のCSSクラスを割り当てる |
3.2. CSSでフォントを適用する方法
<body>全体や、見出し・特定のクラスだけにWebフォントを適用可能- 複数のフォント名（フォールバック）を
,でつなげて指定する
例：font-family: 'Noto Sans JP', sans-serif;
まとめ
Webフォントを使うことで、Webサイトの見た目やブランドイメージが大きく向上します。
Google Fontsなら無料かつ簡単に多様なフォントを導入でき、OSや端末に依存しない表現が可能です。
サンプルHTMLを参考に、ぜひ自分のサイトやWebアプリでもWebフォントを活用してみてください。