CSS 入門

CSS Google Fonts

Webフォント（Web Fonts）を使用することで、視覚的に魅力的でブランドのトーンに合致したWebサイトを構築できます。ブラウザに標準搭載されているデフォルトのフォントは非常に限定的であり、そのままではWebサイトが凡庸な印象になりがちです。

Google Fonts は、プロジェクトに簡単に統合できる膨大な無料のオープンソースフォントライブラリを提供しています。これにより、デザインの可能性が大幅に広がり、全体的なユーザーエクスペリエンス（UX）を向上させることができます。

本章では、Google FontsをCSSに導入し、テキストスタイルをアップグレードして、より魅力的なページを作成する方法をガイドします。

1. Google Fontsを理解する

Google Fontsは、膨大なオープンソースフォントのコレクションを提供する無料サービスです。フォントファイルをダウンロードして自社サーバーでホストする必要はありません。Googleがホスティングと配信を担うため、異なるブラウザやデバイスにおいて高速なロード時間と高い互換性が保証されます。

1.1 Google Fontsを使用するメリット

  • 低コスト (Accessibility): すべて無料で使用できるため、デザイナーやデベロッパーにとってのコスト障壁が低くなります。
  • 多様性 (Variety): 幅広いスタイル、ウェイト（太さ）、文字セットが提供されており、多様なデザイン選択が可能です。
  • パフォーマンス (Performance): Googleのインフラストラクチャによりフォントが効率的に配信され、Webサイトのロード時間への影響を最小限に抑えます。
  • クロスブラウザ互換性: 異なるブラウザやOS間でシームレスに動作するように設計されています。
  • 統合の容易さ: 最小限のコードでWebサイトにフォントを追加できるシンプルなプロセスです。

2. 適切なフォントを選択する

意図したメッセージを伝え、一貫性のあるデザインを作成するには、適切なフォント選びが極めて重要です。フォントを選択する際は、以下の要素を考慮してください。

  • 可読性 (Readability): 特に本文（ボディテキスト）には、読みやすいフォントを優先します。
  • 明瞭性 (Legibility): 個々の文字がはっきりと判別できることを確認してください。
  • 目的 (Purpose): Webサイトの目的やトーンに合ったものを選びます。子供向けサイトなら遊び心のあるフォント、ビジネスサイトならよりフォーマルなフォントが適しています。
  • フォントペアリング (Font Pairing): 異なるフォントの組み合わせを検討します。セリフ体（Serif）とサンセリフ体（Sans-serif）を組み合わせることで、視覚的な興味と階層（ヒエラルキー）を生み出すことができます。
  • ウェイトとスタイル: レギュラー、ボールド（太字）、イタリック（斜体）などの異なるバリエーションを試し、強調や視覚的階層を構築します。

3. WebサイトにGoogle Fontsを追加する

Google FontsをWebサイトに追加する方法は主に2つあります。HTMLの <link> タグを使用する方法と、CSSの @import ルールを使用する方法です。

3.1 方法 1：<link> タグを使用する (推奨)

これはGoogle Fontsを追加する際に最も推奨され、一般的に使用される方法です。ブラウザがフォントファイルを並列でダウンロードできるため、パフォーマンス面で優れています。

  1. フォントを選択: Google Fontsのサイト（https://fonts.google.com/）にアクセスし、使用したいフォントを検索します。
  2. スタイルを選択: 選択したフォントをクリックし、必要なスタイル（ウェイトやイタリック）の横にある「+ Select this style」ボタンをクリックします。
  3. コードをコピー: サイドバーの「Use on the web」セクションで「<link>」を選択し、提供されたコードをコピーします。
  4. HTMLに貼り付け: HTMLドキュメントの <head> セクション内に貼り付けます。自身のCSSファイルへのリンクよりも前に配置するようにしてください。

HTMLの例:

<!DOCTYPE html>
<html>
<head>
  <title>モダンチュートリアル</title>
  <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=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <h1>モダンチュートリアルへようこそ</h1>
  <p>これはRobotoフォントを使用したテキストです。</p>
</body>
</html>

この例では、Roboto フォントの 400（レギュラー）と 700（ボールド）を選択しています。

3.2 方法 2：@import ルールを使用する

この方法では、CSSファイル内に直接フォントをインポートできます。

  1. フォントを選択: 前述の方法と同様にスタイルを選択します。
  2. コードをコピー: サイドバーの「Use on the web」の下で「@import」を選択し、コードをコピーします。
  3. CSSに貼り付け: CSSファイルの最上部に貼り付けます。

CSSの例:

/* CSSの最上部に配置 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-weight: 700; /* インポートしたBoldを使用 */
}

注意:@import は便利ですが、古いブラウザや低速なネットワーク環境では、CSSファイルの解析が遅延し、パフォーマンスに影響を与える可能性があります。通常は <link> タグを使用するのがベストプラクティスです。

4. CSSでGoogle Fontsを適用する

フォントを導入したら、CSSの font-family プロパティを使用して特定の要素に適用します。

body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; /* 太字を使用 */
}

p {
  font-family: 'Lato', sans-serif;
  font-style: italic; /* 斜体を使用 */
}
  • font-family プロパティの最初の値は、Google Fontsで指定されたフォント名です。
  • 2番目の値（例：sans-serif）は、フォールバックフォント（Fallback Font）です。

4.1 フォントウェイトとスタイルの使用

Google Fontsは通常、多くのウェイト（100, 300, 400, 700, 900など）を持っています。これらのバリエーションを使用するには、Google Fontsのサイトで明示的に選択する必要があります。

例えば、Robotoの 400（レギュラー）のみを選択した場合、CSSで font-weight: 700; と書いても、ブラウザが無理やり太字に見せかける「擬似ボールド」になるか、デフォルトフォントに戻ってしまいます。

正しい手順:

  1. Google Fontsのリンクに wght@400;700 が含まれていることを確認する。
  2. CSSで適用する：
h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* インポート済みの Bold 700 が適用される */
}

4.2 フォールバックフォント (Fallback Fonts)

font-family プロパティでフォールバックを指定することは極めて重要です。これにより、Google Fontsの読み込みに失敗した場合でも、テキストの可読性が維持されます。使用するWebフォントに近いスタイルの総称フォントファミリーを選択してください。

  • serif: Times New Roman, Georgia
  • sans-serif: Arial, Helvetica
  • monospace: Courier New

5. Google Fontsのパフォーマンス最適化

Google Fontsのパフォーマンスは高いですが、さらに最適化するための手段があります。

  • フォントの数を制限する: 使用するフォントが多すぎるとHTTPリクエストが増え、サイトの速度が低下します。1つのプロジェクトで 2〜3種類まで に抑えるのが理想的です。
  • 必要なスタイルのみを選択する: 実際に使用するウェイトとスタイルのみをチェックしてください。Thin 100 から Black 900 まで全選択すると、ファイルサイズが大幅に増加します。
  • font-display プロパティを活用する: Google Fontsのコードにはデフォルトで &display=swap が含まれています。これは font-display: swap 戦略を指示するものです。
  • swap（推奨）: まずフォールバックフォントを表示し、Webフォントのロードが完了した時点で差し替えます。これがパフォーマンスとUXのバランスが最も取れた選択です。
  • block: フォントがロードされるまで、テキストを非表示にします。

実装方法:
URLの末尾に &display=swap パラメータを追加します。

HTML形式:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

CSS @import 形式:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');