【HTML】Google Fontsを適用する方法
目次
- Google Fontsとは
- Google Fontsの基本的な使い方
- linkタグを使った適用方法
- @importを使った適用方法
- font-displayの設定
- 複数フォントの適用
- 特定の要素に適用する
- カスタムフォントと組み合わせる
Google Fontsとは
Google Fontsは、Googleが提供する無料のWebフォントサービスです。 これを使用すると、追加のフォントファイルを用意せずに、CSSを通じてWebサイトに美しいフォントを適用できます。
Google Fontsの基本的な使い方
Google Fontsを使用するには、まず公式サイト(Google Fonts)にアクセスし、好きなフォントを選択します。 その後、提供されるコードをHTMLに追加するだけで利用可能です。
linkタグを使った適用方法
Google Fontsの公式サイトでは、選択したフォントの埋め込み方法として「<link>」タグを使用する方法が提供されています。 例えば、「Roboto」フォントを適用する場合は、以下のように記述します。
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
@importを使った適用方法
Google FontsはCSSファイル内で@importを使用して読み込むこともできます。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
@importを使用すると、外部のCSSファイルでフォントを適用しやすくなります。
font-displayの設定
Google FontsのURLには「display=swap」オプションがあります。 これは、フォントの読み込み中に一時的に代替フォントを表示し、読み込み完了後に指定したフォントへ切り替えるための設定です。
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
display=swap を使うことで、フォントが完全に読み込まれるまでの間に「Flash of Invisible Text (FOIT)」を防ぎ、ユーザー体験を向上させます。
複数フォントの適用
複数のフォントを同時に使用することも可能です。 例えば、「Roboto」と「Open Sans」を同時に適用するには、次のようにします。
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Open Sans', sans-serif;
}
特定の要素に適用する
フォントをページ全体ではなく、特定の要素に適用することも可能です。 例えば、見出しだけに特定のフォントを適用する場合は次のようにします。
h1 {
font-family: 'Roboto', sans-serif;
}
カスタムフォントと組み合わせる
Google Fontsとローカルのカスタムフォントを組み合わせることもできます。
@font-face {
font-family: 'MyCustomFont';
src: url('custom-font.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', 'Roboto', sans-serif;
}
これにより、カスタムフォントを優先し、利用できない場合はGoogle Fontsのフォントを適用することが可能になります。