① まず結論
Webと印刷では、フォントの扱い方が根本的に違います。Webは「ブラウザがその場でフォントを読み込んで表示する」。印刷は「PDFの中にフォント情報を埋め込んで持ち運ぶ」。この違いを押さえれば、表示崩れや遅さの原因が見えてきます。
② たとえ話
料理でたとえると分かりやすいです。
Webフォントは「お店で材料を取り寄せて、その場で料理する」イメージ。注文（CSS指定）が来てから材料（フォントファイル）が届きます。届くのが遅いと、一瞬だけ違う材料（代替フォント）で出す必要があります。
PDF入稿は「材料を全部詰めたお弁当を渡す」イメージ。PDFの中に、表示や印刷に必要なフォント情報が同封されていれば、誰がどこで開いても同じ見た目になりやすくなります。同封し忘れると、開いた人の環境にある別のフォントに勝手に置き換わってしまいます。
Webは「取り寄せ」、印刷は「持参」。
③ 図解で見る
Webと印刷、それぞれのフォントが届くまでの流れ。
Webの場合
- CSSでフォント指定
- ブラウザがWOFF2を読込
- 表示
- 遅いと代替フォントが一瞬出る（FOUT）
読み込み中はシステムフォントで仮表示され、後から本命のフォントに切り替わります。
印刷の場合
- DTPで作成
- PDFに書き出し
- フォント埋め込み
- 印刷会社のRIPで出力
PDFに埋め込んでおけば、相手の環境にフォントがなくても同じ見た目で印刷できます。
④ よくある失敗
Macで作ったPDFをWindowsで開いたら、文字が変わった
よくある原因は、PDFにフォントが正しく埋め込まれていないことです。Macに入っているフォントがWindows側にない場合、別のフォントに置き換わって見た目が変わることがあります。PDFを書き出すときは、「フォントを埋め込む」設定になっているか確認しましょう。
Webサイトに重い日本語フォントを、必要以上に読み込む
日本語フォントは、ひらがな・カタカナ・漢字・英数字・記号を含むため、欧文フォントより重くなりやすいです。Google Fonts経由でも、読み込むウェイトや文字種が多いと表示速度に影響します。必要な太さだけに絞る、使うページを限定する、self-hostの場合はサブセット化するなど、読み込み量を減らす工夫が必要です。
印刷会社に入稿したら「フォント情報が足りません」と返ってきた
印刷用PDFでは、フォントの埋め込みや画像解像度、カラーモードなどが入稿条件に含まれることがあります。PDF/X-1aやPDF/X-4など、指定された形式で書き出す必要がある場合もあります。入稿前に印刷会社の規定を確認し、どの形式で書き出すべきかを先に決めておくと、差し戻しを減らせます。
⑤ 実務ではこう判断する
Webで使うなら：Google Fontsかself-host＋WOFF2
手軽に始めるならGoogle Fontsが使いやすいです。ただし、表示速度や管理性を重視する場合は、WOFF2をself-hostする方法もあります。どちらの場合も、読み込むウェイトを増やしすぎないこと、font-display を指定することが大切です。
印刷で使うなら：書き出し時にフォント埋め込みを必ず確認
PDF書き出しの設定で「フォントを埋め込む」「サブセット埋め込み」のチェックを入れます。チェックを外したPDFは、別環境で文字化けや置き換わりが起きます。
Web/印刷の両方で使うフォントは事前にライセンスを確認
Web表示OKのフォントでも、PDFに埋め込んで配布するのは別の許可が必要なことがあります。「Webだけ」「PDF配布もOK」「アプリ同梱もOK」と段階が違うので、用途を整理してから選びます。
⑥ 用語メモ
- WOFF2
- Webで読み込みやすいように圧縮されたフォントファイル形式。OTFやTTFより軽くなりやすく、現在のWebフォントでよく使われます。
- サブセット
- フォントに含まれる文字のうち、使う文字だけを残して軽量化したフォントファイル。日本語Webフォントを軽くしたいときに重要です。
- FOUT
- Webフォントが読み込まれる前に、一瞬だけ代替フォントで表示され、その後本命のフォントに切り替わる現象。
- FOIT
- Webフォントが読み込まれるまで、文字が一時的に表示されない現象。font-display の指定によって起こり方が変わります。
- PDF埋め込み
- PDFの中に、表示や印刷に必要なフォントデータを含めておくこと。相手の環境に同じフォントがなくても、見た目が崩れにくくなります。
⑦ 学習後のチェック
- Webと印刷でフォントの扱い方が違う理由を説明できる
- WOFF2が何か、ざっくり言える
- PDFのフォント埋め込みの意味がわかる
- 自分の用途で「届け方」をどちらにすべきか判断できる
関連フォント