なぜ端末でフォントが変わるのか
font-family は「使いたいフォントの候補リスト」です。先頭のフォントが端末に入っていなければ次の候補へ、それもなければ次へと順にたどり、最終的にブラウザの既定フォントが使われます。これがフォールバックです。
問題は、OSや端末ごとに搭載されているフォントが違うことです。Windows・macOS・iOS・Androidで標準フォントが異なるため、特定のフォント名だけを指定していると、入っていない環境では別物に置き換わります。
同じ文字でも字形や太さ、字幅が違うため、行数が変わってレイアウトが崩れたり、デザインの印象が大きく変わったりします。
フォールバックの設計
確実なのは、主要OSで近い見た目になるフォントを順に並べ、最後に総称ファミリー(sans-serif や serif)を必ず置くことです。総称ファミリーを末尾に入れておけば、最悪でも種類の合った既定フォントになります。
日本語サイトでは、欧文フォントを先に、日本語フォントを後に書くと、英数字と日本語でそれぞれ意図したフォントが当たりやすくなります。各OSの代表的な和文フォントを順に並べるのが定番です。
system-ui を先頭に使うと、各OSの標準UIフォントが当たり、どの環境でも自然な見た目になります。OSネイティブの体験に寄せたいときに有効です。
症状別チェック表
環境によってフォントが別物に置き換わり見た目が変わるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
見た目を揃える手順
差をなくす最も確実な方法はWebフォントの読み込みです。次の順で進めると失敗しにくいです。
- 現状どのフォントが当たっているか開発者ツールのComputedで確認する
- font-familyの末尾に総称ファミリー(sans-serif等)が入っているか確認する
- 見た目を厳密に揃えたいなら@font-faceでWebフォントを読み込む
- Webフォント読み込み中の表示崩れを font-display: swap などで制御する
- 代表的な各OS(Windows/macOS/iOS/Android)で実際の表示を確認する
Webフォントの注意点
Webフォントを使えば端末差をほぼなくせますが、特に日本語フォントはファイルサイズが大きく、読み込みが遅いと表示が一瞬空白になったり、後から差し替わってガタつく現象(FOUT/FOIT)が起きます。
font-display の値で挙動を選べます。swapはまず代替フォントで表示してから差し替え、optionalは読み込みが間に合わなければ代替のまま据え置くなど、体験に合わせて選びます。
日本語Webフォントはサブセット化(必要な文字だけに絞る)で軽量化できます。表示速度と見た目の一貫性のバランスを取って導入してください。
複数環境での見え方を共有して確認する
フォントの置き換わりは、自分の一台だけでは気づけません。WindowsとMac、iOSとAndroidなど複数環境で実際の表示を見比べる必要があります。
ギガサイト便なら、確認用のHTML/ZIPをドロップして発行された共有URLを各環境で開き、フォントの当たり方を見比べられます。会員登録なしでもURLを発行できるので、すぐに検証を始められます。
同じURLのまま中身を差し替えられるため、フォールバック順やWebフォント設定を変えて再確認する繰り返しがスムーズです。社外のレビュアーに渡すときは認証を付けて閲覧者を限定できます。
よくある質問
総称ファミリーは必ず付けるべきですか
はい。font-familyの末尾に sans-serif や serif などの総称ファミリーを必ず置くと、候補フォントがどれも無い環境でも種類の合った既定フォントになり、極端な崩れを防げます。
英数字と日本語で別のフォントにしたいです
font-familyの並び順を使い、欧文フォントを先に、和文フォントを後に書きます。先頭の欧文フォントには日本語の字形が無いため日本語は次の和文フォントに送られ、それぞれに意図したフォントが当たります。
Webフォントにすれば完全に同じ見た目になりますか
端末差はほぼなくせますが、読み込み速度や font-display の設定によって表示の出方は変わります。特に重い日本語フォントはサブセット化で軽量化し、読み込み中の挙動も合わせて調整してください。
system-uiを使うメリットは何ですか
各OSの標準UIフォントが当たるため、どの環境でも自然でOSになじんだ見た目になります。読み込みも不要で速い反面、環境ごとに見た目は異なるので、厳密な統一が必要ならWebフォントを選びます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。