SafariでGoogleフォントが正しく表示されない原因と対策【font-weight・font-style完全ガイド】

SafariでGoogleフォントが表示されない問題とは？

SafariやiOS端末で「Google Fontsが指定通りに表示されない」「デフォルトフォントになってしまう」と困った経験はありませんか？

以下の画像をご覧ください。

本記事では、font-weightやfont-styleの指定ミスによるWebフォント崩れの主な原因と、誰でもできる最適なCSS対策方法をわかりやすく解説します。
これを読めば、全ブラウザ対応のGoogleフォント最適化が簡単に実現できます。

【原因】SafariでGoogle Fontsが正しく表示されない理由

SafariやiOSブラウザは、Google Fontsで複数のfont-weight（太さ）やfont-style（斜体など）を使う場合、font-familyだけの指定ではフォントファイルが正しく適用されないことがあります。
これは、Google Fontsがweightやstyleごとに別ファイルとして配信されているためで、CSS側でもfont-weightとfont-styleを明示する必要があります。

• ChromeやAndroidでは自動補完される場合が多い
• SafariやiOSは厳密な一致が必要（特にBold Italic＝700iなど）

【よくあるミス】font-weightとfont-style未指定のCSS例

以下のようにfont-familyのみ指定しているCSSは、Safariで正しくGoogleフォントが表示されない主な原因です。

@import url('https://fonts.googleapis.com/css?family=Unna:700i&display=swap');

h2 {
  font-size: 56px;
  font-family: 'Unna', 'Roboto', Arial, "Microsoft Yahei", serif;
}

この場合、SafariやiOS端末では意図しない標準サンセリフ体やシステムフォントが表示されてしまいます。

【正しい対策】font-weightとfont-styleを必ず指定

Google Fontsの「Unna:700i」など特定のweight/styleをインポートした場合、下記のようにfont-weight: 700; font-style: italic;をCSSで明示的に指定してください。

@import url('https://fonts.googleapis.com/css?family=Unna:700i&display=swap');

h2 {
  font-size: 56px;
  font-family: 'Unna', 'Roboto', Arial, "Microsoft Yahei", serif;
  font-weight: 700;
  font-style: italic;
}

こうすることで、Safari、Chrome、Android、iOSなど全てのブラウザでGoogleフォントが意図通り表示されます。

【仕組み解説】Google FontsとSafariの挙動

• Google Fontsはweight/styleごとに別ファイルを生成し配信する仕様
• CSSで一致するfont-weight/font-styleを指定しないとSafari/iOSで適用されない
• 複数スタイル・ウェイトを使う場合は、それぞれの組み合わせを正確に指定
• ChromeやAndroidはやや寛容だが、今後すべてのブラウザで厳密化される可能性あり

よくある質問（FAQ）

Q. font-weightやfont-styleを指定しないとどうなる？

A. SafariやiOSではGoogleフォントが使われず、システム標準フォントに置き換わることがあります。

Q. すべてのGoogle Fontsでこの設定が必要？

A. はい。BoldやItalicを使う場合は、必ず該当するweight/styleを明示してください。

Q. 他のブラウザでも同じ問題が起きる？

A. 特にSafariやiOSが顕著ですが、将来ChromeやEdge等でも同様の仕様になる可能性があります。

Q. 複数のweight/styleを使いたいときは？

A. それぞれインポートし、該当CSS部分でweight/styleを正確に指定してください。

【チェックリスト】Googleフォント崩れ防止のためのポイント

• Google Fontsインポート時、必要なweight/styleを指定しているか
• CSS側でも同じfont-weight・font-styleを指定しているか
• ブラウザごとの表示をテストしたか
• モバイルとPC両方で確認したか

まとめ

• 今後のWeb制作では、font-familyだけでなくfont-weight・font-styleも必ずセットで記述すること
• SafariでGoogleフォントが正しく表示されない主な原因はfont-weight・font-styleの指定漏れ
• 正しい指定方法を守れば、全ブラウザ・全端末で美しいWebフォント表示が実現