(Sample)
今回は、新人エンジニアの方に向けて「Google Fonts（グーグルフォント）」の使い方を丁寧に解説していきます。Web制作の現場では、フォント選びは見た目の印象を大きく左右する重要な要素です。
この記事を読むことで、Google Fontsの導入から使い方までがしっかり理解できるようになりますよ。
Google Fontsとは？
Google Fontsとは、Googleが提供する無料のWebフォントライブラリです。Webページにかっこいいフォントや個性的なフォントを簡単に導入できます。
そもそもWebフォントって何？
通常のWebページでは、訪問者のパソコンにインストールされているフォントしか使えません。でも、Webフォントを使えば、インストール不要で好きなフォントを配信できるんです！
たとえば、「Lobster」や「Roboto」など、普段見かけないおしゃれなフォントも、Google Fontsを使えばすぐに表示できます。
Google Fontsの基本的な使い方6ステップ
ステップ1：Google Fontsのサイトにアクセス
まずは公式サイトにアクセスしましょう。
このサイトがGoogle Fontsのホームです。
ステップ2：フォントを選ぶ
トップページでは、フォント一覧がずらっと表示されています。
- カテゴリ（serif, sans-serifなど）
- 言語（日本語、英語など）
- 太さ（weight）
などで絞り込むことができます。
補足：フォントの種類って何？
| 種類 | 特徴 | 例 |
|---|---|---|
| serif | 文字の端に飾り（セリフ）がある | Times New Romanなど |
| sans-serif | セリフがなく、すっきりした印象 | Arial、Robotoなど |
| monospace | 文字幅がすべて同じ | Courier New、Roboto Mono |
ステップ3：フォントを選択
好みのフォントが見つかったら、そのフォントをクリックして詳細画面へ。
「Select this style」や「Get Font」などのボタンをクリックして、使いたいスタイル（太さや斜体など）を選びます。
太さ（Weight）とは？
たとえば：
- 400 → 通常（Regular）
- 700 → 太字（Bold）
フォントによっては「100（Thin）」や「900（Black）」などもあります。
ステップ4：フォントを読み込む方法を選ぶ
次に、そのフォントをどうやってWebページに組み込むかを選びます。
方法1：HTMLの<head>にlinkタグを追加
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
方法2：CSSファイルに@importを追加
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
どちらが良い？
- linkタグの方が読み込みが早く、ベストプラクティスとして推奨されがち。
- @importは複数のCSSファイルを統合する時などに便利。
ステップ5：CSSでフォントを指定する
あとは、CSSでフォントを適用するだけです。
body {
font-family: 'Roboto', sans-serif;
}
このfont-familyプロパティでは、複数のフォントを指定しておくと、代替フォント（フォールバック）として機能します。
フォールバックフォントとは？
「Robotoが読み込めなかったらsans-serifで表示してね」という指定になります。
ステップ6：表示設定をカスタマイズ（display=swap）
URLの末尾にあるdisplay=swapは、フォントが読み込まれるまで代替フォントで表示するという設定です。
表示速度を重視する場合は、この設定がオススメです！
使用例：複数フォントを一括指定するHTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Fonts Sample</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
.lobster {
font-family: 'Lobster', cursive;
font-size: 2rem;
}
</style>
</head>
<body>
<p class="lobster">これはLobsterフォントです。</p>
</body>
</html>よく使われるGoogleフォント一覧（人気例）
| フォント名 | 用途例 | 特徴 |
|---|---|---|
| Roboto | 一般的なWebサイト | 読みやすく万能 |
| Open Sans | ビジネス系サイト | クリーンでプロフェッショナル |
| Lobster | 飲食系・ポップな印象 | カジュアルで個性的 |
| Noto Sans JP | 日本語Webサイト | 高品質な日本語フォント |
| Indie Flower | 手書き風デザイン | やさしい印象 |
メリットとデメリット
メリット
- 無料で使える
- Webページに簡単に組み込める
- 種類が豊富
- 日本語にも対応（Noto Sans JPなど）
デメリット
- 通信によって読み込み速度が落ちる場合がある
- 一部のフォントはサイズが大きくなる
- 日本語フォントは比較的重い（ファイルサイズが大きい）
よくある質問
Q：日本語フォントも使えますか？
はい、使えます！たとえば「Noto Sans JP」はGoogle Fontsで利用できる人気の日本語フォントです。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
今後の学習の指針
- CSSでのフォント指定方法（
font-weight,font-style）をさらに学びましょう。 - パフォーマンスの観点から、フォントのプリロード（preload）やSubset指定（必要な文字だけ読み込む）も勉強してみてください。
- フォントライセンスや商用利用の可否についても少しずつ意識してみましょう（Google Fontsは基本無料ですが、念のため）。
Webデザインの第一歩として、まずは色々なフォントで遊んでみるのがオススメです！
他にも知りたいトピックがあれば、どんどん教えてくださいね。