CSSでGoogleフォントを使う方法
2024-08-25
Google WebフォントをCSSファイルにインポートする方法
Google Webフォントは、ウェブページにさまざまなフォントを簡単に追加できるサービスです。CSSファイルにインポートすることで、任意のテキストに指定したフォントを適用できます。
Google Fontsのウェブサイトからフォントを選択する
- フォントのスタイル（Regular、Bold、Italicなど）を指定します。
- 必要なフォントを選択し、プレビューを確認します。
- Google Fontsのウェブサイトにアクセスします。
フォントのリンクを取得する
- 「<link>」タグが表示されます。これをコピーします。
- 選択したフォントの右側の「Embed」ボタンをクリックします。
CSSファイルにリンクを貼り付ける
<head>タグ内に、コピーした「<link>」タグを貼り付けます。- 自分のウェブサイトのCSSファイルを開きます。
例
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
この例では、Robotoというフォントをインポートし、400（Regular）と700（Bold）のウェイトを指定しています。
CSSでフォントを適用する
- CSSファイルで、適用したいテキストの要素（例えば、
<p>タグ）にフォント名を指定します。
p {
font-family: 'Roboto', sans-serif;
}
これで、指定したテキストにRobotoフォントが適用されます。
注意
- フォントの読み込みに時間がかかることがあります。
- インターネット接続がない場合、Google Webフォントは使用できません。
CSSファイルにGoogle Webフォントをインポートし、CSSで使う方法のコード例解説
- Embedボタンをクリックし、表示される
<link>タグをコピーします。
HTMLの<head>タグ内にリンクを貼り付け
コピーした<link>タグを、あなたのHTMLファイルの<head>タグ内に貼り付けます。このタグは、ブラウザにGoogle FontsのCSSファイルを呼び出すように指示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Fontsの例</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
</head>
<body>
<p>このテキストはRobotoフォントで表示されます。</p>
</body>
</html>
CSSファイルで、適用したい要素にfont-familyプロパティを使って、インポートしたフォント名を指定します。
/* style.css */
p {
font-family: 'Roboto', sans-serif;
/* Robotoフォントが使えない場合の代替フォント */
}
コード解説
- font-familyプロパティ
- 適用するフォント名を指定します。
- カンマで区切って複数のフォント名を指定することで、フォントのフォールバックを設定できます。
- <link>タグ
rel="stylesheet": このリンクがスタイルシートであることを示します。href: Google FontsのCSSファイルのURLを指定します。family: 使用するフォントファミリー名を指定します。wght: フォントのウェイト（太さ）を指定します。display: フォントの表示方法を指定します。swapは、フォントが読み込まれるまでデフォルトのフォントを表示し、読み込み完了後に切り替えることを意味します。
動作確認
ブラウザでHTMLファイルを開くと、指定したテキストにRobotoフォントが適用されていることを確認できます。
ポイント
- フォールバックフォント
sans-serifのように、指定したフォントが使えない場合に表示されるフォントを指定できます。 - フォントのスタイル
italic属性で、フォントのスタイルをイタリックにできます。 - フォントのウェイト
wght属性で、フォントの太さを指定できます。
- Google Fontsは無料で使用できますが、一部のフォントは商用利用に制限がある場合があります。
@importを使ってCSSファイル内にフォントをインポートする方法もありますが、<link>タグを使う方が一般的です。- Google Fontsのウェブサイトでは、様々なフォントが提供されており、自由に組み合わせることができます。
- キャッシュ
ブラウザは、Google FontsのCSSファイルをキャッシュするため、一度読み込まれたフォントは、次回以降は高速に表示されます。 - パフォーマンス
Google Fontsの読み込みは、ページの読み込み速度に影響を与える可能性があります。
CSSファイルへのGoogle Webフォントのインポート方法：代替手段
Google WebフォントをCSSファイルにインポートする方法は、主に2つの方法があります。これまでに解説した<link>タグを使った方法に加えて、もう一つの方法として@importディレクティブを使った方法があります。
<link>タグを使った方法（既に解説済み）
- デメリット
- メリット
- HTMLとCSSの分離が明確になり、構造が分かりやすい。
- ブラウザの並列読み込みが有効になり、ページの表示速度が向上する可能性がある。
- HTMLの
<head>タグ内に<link>タグを記述することで、外部のCSSファイルを呼び出す方法です。
@importディレクティブを使った方法
- デメリット
- CSSファイルのサイズが大きくなる可能性がある。
- メリット
- HTMLファイルに記述する内容が少なくなり、シンプルになる。
- CSSファイル自体に全てのスタイルが記述されるため、管理がしやすい場合がある。
- CSSファイル内に
@importディレクティブを使って、他のCSSファイルをインポートする方法です。
/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
p {
font-family: 'Roboto', sans-serif;
}
どちらの方法を選ぶべきか
どちらの方法を選ぶかは、プロジェクトの規模や、HTMLとCSSの管理の仕方、ページの表示速度など、様々な要因によって異なります。
- <link>タグ
- 大規模なプロジェクトで、HTMLとCSSを厳密に分けて管理したい場合。
- ページの表示速度を重視する場合。
- フォントの最適化
- ローカルでのフォントファイルの使用
- Google Fontsではなく、ローカルにフォントファイルを置いて使用することも可能です。
- この場合は、
@font-faceルールを使用します。
Google WebフォントをCSSファイルにインポートする方法は、<link>タグと@importディレクティブの2つの方法があります。どちらの方法を選ぶかは、プロジェクトの状況に合わせて適切な方法を選択しましょう。
@importディレクティブは、古いブラウザではサポートされていない場合があります。@importディレクティブは、CSSファイルの最後に記述する必要があります。
さらに詳しく知りたい方へ
- CSSの仕様
CSSの仕様書を読むことで、@importディレクティブや@font-faceルールの詳細な仕様を確認できます。 - Google Fontsの公式ドキュメント
Google Fontsのウェブサイトでは、より詳細な情報や、様々なオプションについて解説されています。
css fonts google-webfonts
