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

aki0o0 2025.06.04

CSS Googleフォント Safari

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

SafariでGoogleフォントが表示されない問題とは？
【原因】SafariでGoogle Fontsが正しく表示されない理由
【よくあるミス】font-weightとfont-style未指定のCSS例
【正しい対策】font-weightとfont-styleを必ず指定
【仕組み解説】Google FontsとSafariの挙動
よくある質問（FAQ）
Q. font-weightやfont-styleを指定しないとどうなる？
Q. すべてのGoogle Fontsでこの設定が必要？
Q. 他のブラウザでも同じ問題が起きる？
Q. 複数のweight/styleを使いたいときは？
【チェックリスト】Googleフォント崩れ防止のためのポイント
まとめ

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

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

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

SafariでGoogleフォントが表示されない — 左側はデフォルトのサンセリフ体が表示されており、右側は本来意図したフォントの表示です。

本記事では、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フォントが意図通り表示されます。