① まず結論
Webと印刷では、フォントの扱い方が根本的に違います。Webは「ブラウザがその場でフォントを読み込んで表示する」。印刷は「PDFの中にフォント情報を埋め込んで持ち運ぶ」。この違いを押さえれば、表示崩れや遅さの原因が見えてきます。
② たとえ話
料理でたとえると分かりやすいです。
Webフォントは「お店で材料を取り寄せて、その場で料理する」イメージ。注文（CSS指定）が来てから材料（フォントファイル）が届きます。届くのが遅いと、一瞬だけ違う材料（代替フォント）で出す必要があります。
PDF入稿は「材料を全部詰めたお弁当を渡す」イメージ。PDFの中に、表示や印刷に必要なフォント情報が同封されていれば、誰がどこで開いても同じ見た目になりやすくなります。同封し忘れると、開いた人の環境にある別のフォントに勝手に置き換わってしまいます。
Webは「取り寄せ」、印刷は「持参」。
③ 図解で見る
Webと印刷、それぞれのフォントが届くまでの流れ。
Webの場合
- CSSでフォント指定
- ブラウザがWOFF2を読込
- 表示
- 遅いと代替フォントが一瞬出る（FOUT）
読み込み中は
印刷の場合
- DTPで作成
- PDFに書き出し
- フォント埋め込み
- 印刷会社のRIPで出力
PDFに
④ よくある失敗
Macで作ったPDFをWindowsで開いたら、文字が変わった
よく
Webサイトに重い日本語フォントを、必要以上に読み込む
日本語フォントは、
印刷会社に入稿したら「フォント情報が足りません」と返ってきた
印刷用PDFでは、
⑤ 実務ではこう判断する
Webで使うなら：Google Fontsかself-host＋WOFF2
手軽に
印刷で使うなら：書き出し時にフォント埋め込みを必ず確認
PDF
Web/印刷の両方で使うフォントは事前にライセンスを確認
Web表示OKの
⑥ 用語メモ
- WOFF2
- Webで読み込みやすいように圧縮されたフォントファイル形式。OTFやTTFより軽くなりやすく、現在のWebフォントでよく使われます。
- サブセット
- フォントに含まれる文字のうち、使う文字だけを残して軽量化したフォントファイル。日本語Webフォントを軽くしたいときに重要です。
- FOUT
- Webフォントが読み込まれる前に、一瞬だけ代替フォントで表示され、その後本命のフォントに切り替わる現象。
- FOIT
- Webフォントが読み込まれるまで、文字が一時的に表示されない現象。font-display の指定によって起こり方が変わります。
- PDF埋め込み
- PDFの中に、表示や印刷に必要なフォントデータを含めておくこと。相手の環境に同じフォントがなくても、見た目が崩れにくくなります。
⑦ 学習後のチェック
- Webと印刷でフォントの扱い方が違う理由を説明できる
- WOFF2が何か、ざっくり言える
- PDFのフォント埋め込みの意味がわかる
- 自分の用途で「届け方」をどちらにすべきか判断できる
関連フォント