クライアント環境のフォント指定がズレる原因と確実な対処法｜現場で使える実践テクニック

2026年07月06日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「クライアント環境のフォント指定がズレる原因と確実な対処法」について解説します。

僕が経験した「納品後のフォント地獄」の話

ほんまの話、Web制作やってて環境依存トラブルで一番ストレスなんが、フォント周りやねん。
昔、とあるコーポレートサイトを納品したときのことです。
僕のMacのローカル環境では完璧に見えてました。
フォントのウエイト、サイズ、行間……全部綺麗に揃ってました。

でも納品の翌日、クライアントから連絡来たんですよ。
「クリオさん、なんか見た目が違うんですけど……」って。
スクリーンショット見せてもらったら、めっちゃ太いフォントに見えてるんです。
原因を調べたら、クライアント環境にインストールされてないフォントを指定してただけやったんです。

恥ずかしい話ですけど、これって現場ではほんまによくあるトラブルなんです。
特にディレクターや営業からの「このフォント使ってください」っていう指定を、そのまま信用して実装しちゃったときにやられます。
今日は、そんな地獄を避けるための知識をお伝えします。

一番よくあるのが、Macには標準搭載されてるけど、Windowsには入ってないフォントを使うパターンです。
例えば「Helvetica Neue」「SF Pro Display」みたいなAppleのフォントですね。

Macにはプリインストールされてるんですけど、Windowsのクライアントが開くと、フォールバック先の指定がない場合「Times New Roman」とか野暮ったいフォントになっちゃいます。
デザイナーさんが見た目で「これいいな」って選んだフォントが、実は環境依存だってことに気づかないんですよ。

CSSで書くときは、こういう感じで複数指定しないといけません：

font-family: 'Helvetica Neue', Arial, sans-serif;

ローカルに「Helvetica Neue」がなかったら「Arial」を使え、ってことですね。

Google Fontsとか、Adobe Fontsを使ってるときに起きやすいやつです。
僕も昔、Google Fontsを指定したのに、本番環境でフォントが読み込まれてないことがありました。

原因は、ファイアウォール設定やセキュリティポリシーで、外部のCDNからの読み込みがブロックされてたんですよ。
クライアント企業の環境では、GoogleとかAdobeのドメインへのアクセスが制限されてることがあります。
特に金融機関とか政府関係の堅い企業はそういう傾向が強いです。

セルフホストされたWebフォント（ファイルをサーバーに置く方式）なら確実ですけど、どうしてもCDN経由を使う場合は、クライアント環境でちゃんと読み込まれてるか確認する必要があります。

これはめっちゃ厄介なやつです。
同じWindowsでも、InternetExplorerとEdgeで見え方が違ったり、MacのSafariとChromeで微妙にウエイトが変わったりします。

特にfont-weight: 500みたいな細かいウエイト指定は、OSによってレンダリング結果が変わることがあります。
Linux環境だと、そもそもフォント周りの設定が全く違うんです。

あと、DPI設定（ディスプレイの解像度）によっても見え方が変わります。
4KディスプレイとフルHDで同じウエイトを指定しても、相対的に見える太さが違うんですよ。

【ステップ1】セーフなフォントスタックを構築する

クライアント環境でも確実に表示されるフォントの組み合わせを作ることが大事です。
ポイントは、一番最初に「セリフ体」「サンス体」「モノスペース」みたいなジェネリック名を複数指定することです。

良い例：

font-family: 'Segoe UI', 'Helvetica Neue', 'メイリオ', sans-serif;

これなら、Windows環境では「Segoe UI」が使われ、Mac環境では「Helvetica Neue」が使われ、最後のsans-serifなら絶対に何かが表示されます。

【ステップ2】Webフォントはセルフホストを基本に

クライアント企業のファイアウォール対策を考えるなら、Webフォントは自社サーバーに置く方式をお勧めします。
/assets/fonts/みたいなディレクトリに.woff2形式で置いておくんですね。

CSSの指定：

@font-face { font-family: 'CustomFont'; src: url('/assets/fonts/custom-font.woff2') format('woff2'); }

この方式なら、どんな環境でも読み込まれます。
ただし、ライセンス確認は必須ですよ。

【ステップ3】複数環境で実装後にテストする

これはほんま重要です。
納品前に、Windows環境のInternet Explorer、Edge、Chrome、MacのSafari、Chromeで見え方を確認してください。
できれば、実際のクライアント企業と同じOS・ブラウザ環境があれば、そこで確認するのがベストです。

【ステップ4】フォールバック計画を立てる

もし万が一、指定したフォントが読み込まれない場合、「何が表示されるか」を想定しておくんです。
例えばsans-serifに代わったら、ラインハイトやフォントサイズを微調整する必要があるかもしれません。
その調整を事前にプロトタイプで試しておくといいですよ。