はじめに
この記事では、Googleフォントの基本的な使い方から実践的なテクニックまでを解説します。Webサイト制作を始めたばかりの方や、デザインの幅を広げたい方に向けて、わかりやすく説明していきますね。
この記事で学べること
- Googleフォントの基本的な使い方
- Webフォントの仕組み
- パフォーマンスを考慮した実装方法
- 実践的な活用テクニック
対象読者
- Webサイト制作の初心者〜中級者
- HTMLとCSSの基礎知識がある方
Googleフォントとは
Googleフォントは、Googleが提供する無料のWebフォントサービスです。1,000種類以上のフォントが用意されており、誰でも自由にWebサイトやアプリケーションで使用できます。
Webフォントの仕組み
通常、Webページで表示されるテキストは、ユーザーのデバイスにインストールされているフォントを使用します。しかし、Webフォントを使用すると、インターネット経由でフォントファイルを読み込むため、デバイスにフォントがインストールされていなくても、意図したデザインで表示できます。
無料で使える理由とライセンス
Googleフォントはすべてオープンソースライセンスで提供されており、商用・非商用を問わず無料で利用できます。ライセンスの表示義務もないため、気軽に使えるのが大きな特徴です。
Googleフォントを使うメリット
デザインの一貫性が保てる
ユーザーの環境に依存せず、すべてのデバイスで同じフォントを表示できます。これにより、デザインの意図を正確に伝えられます。
豊富なフォントから選べる
セリフ体、サンセリフ体、手書き風、モノスペースなど、さまざまなカテゴリのフォントが用意されています。プロジェクトの雰囲気に合わせて最適なフォントを選択できますね。
パフォーマンスの最適化
GoogleのCDN（Content Delivery Network）を通じて配信されるため、高速かつ安定した読み込みが可能です。また、多くのWebサイトがGoogleフォントを使用しているため、ユーザーのブラウザにキャッシュされている可能性が高く、読み込み時間を短縮できます。
基本的な使い方
Googleフォントの導入は3つのステップで完了します。実際にやってみましょう。
ステップ1: フォントを選ぶ
Googleフォントのウェブサイトにアクセスし、使用したいフォントを探します。フォント名で検索したり、カテゴリやスタイルでフィルタリングしたりできます。
ステップ2: フォントを埋め込む
気に入ったフォントが見つかったら、「Select this style」ボタンをクリックします。画面右側に表示される「Embed」タブを選択すると、HTMLに埋め込むためのコードが表示されます。
提供される<link>タグをコピーし、HTMLの<head>セクションに貼り付けます。
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
ステップ3: CSSで適用する
CSSファイルでfont-familyプロパティを使用して、選んだフォントを指定します。
body {
font-family: 'Roboto', sans-serif;
}
フォント名の後にsans-serifやserifなどのフォールバックフォントを指定しておくと、万が一フォントが読み込めなかった場合でも、似た雰囲気のフォントで表示されます。
より実践的な使い方
複数のフォントを使う方法
見出しと本文で異なるフォントを使いたい場合は、複数のフォントを同時に読み込めます。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
body {
font-family: 'Roboto', sans-serif;
}
ウェイトの指定方法
フォントの太さはwghtパラメータで指定します。複数のウェイトを使いたい場合は、セミコロンで区切って指定しましょう。
<!-- 400（通常）と700（太字）を読み込む -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
CSSでは次のように使用します。
.normal-text {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.bold-text {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
フォントの読み込みを最適化する方法
display=swapパラメータを使用すると、フォントの読み込み中も代替フォントでテキストを表示し、読み込み完了後にGoogleフォントに切り替わります。これにより、ユーザーはテキストをすぐに読み始められます。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
必要なウェイトのみを読み込むことで、ファイルサイズを削減できます。すべてのウェイトを読み込むのではなく、実際に使用するもののみを指定しましょう。
注意点とベストプラクティス
パフォーマンスへの影響
Webフォントは外部リソースの読み込みが必要なため、ページの表示速度に影響を与える可能性があります。以下の点に注意してください。
- 使用するフォントの数は最小限にする（2〜3種類まで）
- 必要なウェイトのみを読み込む
-
display=swapを設定し、テキストの表示を優先する
フォールバックフォントの設定
Googleフォントが読み込めない場合に備えて、必ずフォールバックフォントを指定します。
body {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
日本語フォントを使う場合の注意
日本語フォントはファイルサイズが大きいため、読み込みに時間がかかります。Noto Sans JPやNoto Serif JPなどの日本語対応フォントを使用する際は、パフォーマンスに十分注意しましょう。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: 'Noto Sans JP', sans-serif;
}
まとめ
Googleフォントを使用することで、Webサイトのデザインの幅が大きく広がります。この記事で紹介したポイントを押さえておけば、効果的にGoogleフォントを活用できるでしょう。