Google Fonts が読み込めない、反映されない問題の解決方法をご紹介します。

背景 Google Fonts が読み込めない、反映されない？

Google Fonts トラブルシューティング

解決方法) Google Fonts が読み込めない

ホスティングされている Google Fonts を link タグで指定しても font が読み込め無い場合、まず href 属性に設定する URL が間違ってないか確認してみましょう。

例えば、Google Fonts がホスティングされているドメイン名は、正しくは fonts.googleapis.com なのですが、例えば何らかの typo で fonts.googleapi.com と s を消して定義してしまった場合、stylesheet が正しく読み込まれません。

? 正しい URL

<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">

? 間違った URL

<link href="https://fonts.googleapi.com/css2?family=Montserrat" rel="stylesheet">

解決方法) Google Fonts が反映されない

利用する font-style, font-weight をすべて読み込んでないと、フォントが正しく反映されません。

例えば、以下のような CSS を定義しているとします。

.font-bold {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: bold;
}

family=Montserrat だけだと Regular なフォントしか読み込まれないので font-weight: bold; を指定しても正しく適用されません。

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

繰り返しになりますが、以下のように利用する font-style, font-weight をすべて指定して読み込んでおけば font-weight: bold; を指定して正しく適用されます。

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

以上、Google Fonts が読み込めない、反映されない問題を解決した、現場からお送りしました。