Webサイトのデザインを変更する際に、Google Fontsを利用して文字の見た目を変えたいと考える方は多いでしょう。しかし、HTMLとCSSにコードを書いたにもかかわらずフォントが反映されないケースがあります。この記事では、Google Fontsがローカル環境で反映されない原因と確認ポイント、自分のパソコンにインストールされているフォントを利用する方法まで詳しく解説します。
Google Fontsはローカル環境でも利用できる
まず結論からいうと、Google Fontsはローカルサーバー上で開発しているサイトでも通常は利用できます。
Google FontsはGoogleのサーバーからフォントデータを取得する仕組みのため、インターネットに接続されていればローカル環境でも問題なく表示されます。
ローカルサーバーを使用していること自体が原因になることは基本的にありません。
Google Fontsが反映されないときの確認ポイント
最も多い原因はHTMLとCSSの記述ミスです。
例えばGoogle Fontsで「Noto Sans JP」を利用する場合は、headタグ内に以下のようなコードが必要です。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
その後、CSS側でフォントを指定します。
body {
font-family: 'Noto Sans JP', sans-serif;
}
以下の項目も確認しましょう。
- linkタグがhead内に記述されているか
- CSSファイルが正しく読み込まれているか
- font-family名がGoogle Fontsの指定と一致しているか
- ブラウザのキャッシュが残っていないか
- インターネット接続が有効か
ブラウザの開発者ツールで確認する方法
ChromeやEdgeではF12キーを押すと開発者ツールを開けます。
Networkタブを確認し、「fonts.googleapis.com」や「fonts.gstatic.com」へのアクセスが失敗していないか確認してください。
またConsoleタブにエラーが表示されている場合は、その内容が原因特定の手掛かりになります。
自分のパソコンのフォントを利用する方法
Google Fontsがうまく動作しない場合でも、パソコンにインストールされているフォントを利用できます。
例えばWindowsでメイリオを使う場合は以下のように記述します。
body {
font-family: 'メイリオ', 'Meiryo', sans-serif;
}
よく使われるフォントの例は次の通りです。
| フォント名 | 主な環境 |
|---|---|
| Meiryo | Windows |
| Yu Gothic | Windows |
| MS Gothic | Windows |
| Hiragino Sans | Mac |
| Hiragino Kaku Gothic ProN | Mac |
ただし閲覧者のパソコンに同じフォントが入っていない場合は別のフォントに置き換わります。
フォントファイルを直接読み込む方法
より確実に同じフォントを表示したい場合は、フォントファイルをサイト内に配置して読み込む方法があります。
CSSの@font-faceを利用します。
@font-face {
font-family: 'MyFont';
src: url('./fonts/MyFont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}
この方法ならGoogle Fontsへの通信が不要になり、オフライン環境でも利用できます。
Google Fontsが反映されないときの簡単なチェックリスト
- Google Fontsのlinkタグを貼り付けたか
- font-familyのスペルは正しいか
- CSSファイルが読み込まれているか
- ブラウザキャッシュを削除したか
- インターネット接続は正常か
- 開発者ツールでエラーを確認したか
まとめ
Google Fontsはローカルサーバー上でも通常利用できます。反映されない場合は、HTMLのlinkタグやCSSのfont-family指定、キャッシュや読み込みエラーを確認することが重要です。
もしGoogle Fontsが利用できない環境であれば、パソコンにインストールされているフォントを指定する方法や、フォントファイルを直接配置して読み込む方法もあります。まずはブラウザの開発者ツールでエラーの有無を確認し、どこで読み込みに失敗しているのか調査することから始めましょう。
コメント