iPhone SafariでGoogle FontsやAdobe Fontsが表示されない？原因と対処法を完全解説｜DAD UNION

Webサイトをスタイリッシュに見せるために欠かせないのが「Webフォント」です。特に「Google Fonts」や「Adobe Fonts（旧Typekit）」は多くのWeb制作現場で利用されており、簡単に美しいフォントを適用できます。

ところが、iPhoneのSafariでこれらのWebフォントが表示されない・適用されないという現象に悩んでいる方も多いのではないでしょうか？

本記事では、その原因と初心者でもできる対処方法を、わかりやすく解説していきます。

Contents

原因1：CSS内の@importによる読み込みの問題
- 対処方法：HTMLの<head>に直接<link>で読み込む
原因2：HTTPS接続の不備
- 対処方法
原因3：Adobe Fontsのドメイン登録忘れ
- 対処方法
原因4：フォールバックフォント未指定
原因5：iOS Safariのバグや互換性の問題
- 対処方法
注意点
推奨される書き方
まとめ

原因1：CSS内の@importによる読み込みの問題

CSSでWebフォントを読み込む際に以下のように@importを使っていませんか？

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://use.typekit.net/zla6llb.css');

この書き方は一見問題が無さそうに見えますが、iPhoneのSafariでは正常に動作しないケースがあることが知られています。

特にCSSファイル内で複数の@importを使っていたり、入れ子構造になっている場合、Safariはそれを正しく解釈できないことがあり、フォントが読み込まれないことがあります。

対処方法：HTMLの<head>に直接<link>で読み込む

最も確実な方法は、CSS内で@importを使うのではなく、HTMLファイルの<head>タグ内に<link>タグを直接書く方法です。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/zla6llb.css">

これで多くの場合、iPhone SafariでもWebフォントが正しく読み込まれ、反映されます。

原因2：HTTPS接続の不備

Safariはセキュリティに厳しく、HTTPS接続でない場合や、証明書に問題がある場合にはWebフォントの読み込みをブロックすることがあります。

対処方法

自サイトがHTTPSであることを確認
Google FontsやAdobe FontsのURLが「https://」から始まっていることを確認

SSL証明書が正しく設定されていないと、フォントの読み込みに限らず様々な外部リソースがブロックされることがあるので、Let’s Encryptなどで無料SSLを設定しておきましょう。

原因3：Adobe Fontsのドメイン登録忘れ

Adobe Fontsを使用する場合は、Adobeの管理画面で使用するドメインを事前に登録する必要があります。

対処方法

Adobe Fontsにログイン
該当のWebプロジェクトを開く
「ドメイン」欄に自サイトのURLを追加

これを忘れると、フォントは読み込まれず、Safariでは特に顕著にその影響が出ることがあります。

原因4：フォールバックフォント未指定

フォントが万が一読み込めなかったときのために、CSSでフォールバックフォントを設定するのは基本中の基本です。

body {
  font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

これにより、Google FontsやAdobe Fontsが読み込まれなかった場合でも、似た印象のシステムフォントに切り替えて表示されるようになります。

原因5：iOS Safariのバグや互換性の問題

特定のiOSバージョンでは、「Noto Sans JP」など一部日本語フォントがうまくレンダリングされず、文字が極端に細くなったりすることがあります。

対処方法

font-display: swap; を使って非同期フォント読み込みに対応
必要であれば別のWebフォントに切り替え検討

注意点

CSS内の@importの多用は避け、HTMLのheadに直接<link>を記述
HTTPSが正しく設定されているか確認（特に独自ドメイン）
Adobe Fontsは必ず管理画面で使用ドメインを追加
iOSバグへの対応として、フォールバックフォントやfont-displayを活用

一つの原因だけでなく、複数の要因が重なってフォントが適用されないケースも多いため、順を追って一つ一つ確認するのが大切です。

推奨される書き方

HTML内で以下のように記述するのがベストです。

<head>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
  
  <!-- Adobe Fonts -->
  <link rel="stylesheet" href="https://use.typekit.net/zla6llb.css">

  <style>
    body {
      font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
  </style>
</head>