フォントが変わらないときに確認する4つのこと

font-family を指定したのに、表示がまったく変わらない。CSSの中でも特に「効いているのか分からない」種類のつまずきです。順番に確認していきましょう。

1. そもそも、その指定が届いているか

まず検証ツールで、文字を選んで font-family の行を探します。自分が書いた指定が出てこないなら、フォントの問題ではなくセレクタの問題です。CSSが反映されないときの手順で切り分けてください。

指定が出ていて、打ち消し線も付いていないのに変わらない場合は、次に進みます。

2. そのフォントが、その端末に入っているか

ここがいちばん多い原因です。font-family は「このフォントを使ってください、無ければ次のを」というお願いの一覧にすぎません。指定した名前のフォントが端末に無ければ、無視されて次の候補が使われます。

つまり、あなたのパソコンで見えている表示と、他の人の表示は違う可能性があります。Macで作って「游ゴシック」を指定すると、Windowsの人には別のフォントで表示されます。

3. フォント名の書き方が合っているか

• 名前に空白が含まれるときは、引用符で囲む（"Hiragino Sans" など）
• 日本語のフォント名は、環境によって名前が違うことがある
• 最後に必ず総称名（sans-serif や serif）を書いておく

総称名は、どれも見つからなかったときの最後の受け皿です。これを書いておけば、少なくともゴシック体か明朝体かは指定できます。

4. Webフォントの読み込みに失敗していないか

端末に無いフォントを使いたいときは、Webフォントとしてファイルごと配信します。この場合、読み込みに失敗すると当然表示されません。

検証ツールのNetworkタブで、フォントファイル（.woff2 など）が404になっていないかを確認してください。読み込めているのに反映されないときは、@font-face で指定した font-family の名前と、実際に使っている名前が一致しているかを見ます。

日本語Webフォントは重い

英語のフォントは文字数が少ないので数十KBですが、日本語は数千文字あるためファイルが桁違いに大きくなります。何も考えずに読み込むと、ページの表示が目に見えて遅くなります。

学習中は、端末に入っているフォントに任せるのが無難です。次の指定を書いておけば、WindowsでもMacでも、それぞれの標準的なゴシック体が使われます。

body {
  font-family: system-ui, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

確認の近道

検証ツールで文字を選び、Computed（計算済み）タブを見ると、実際に使われているフォント名が表示されます。ここに自分の指定した名前が出ていなければ、そのフォントは使われていません。推測せずに、ここを見るのが最短です。