SVGをPDFにするとフォントが変わる・文字が消える原因と対処法

SVGをブラウザーで開くと正しいのに、PDFでは書体が変わることがあります。SVGのfont-familyは多くの場合、フォントの名前を指定しているだけで、フォントファイル自体を含んでいません。閲覧中の端末にフォントがあれば表示できますが、PDF生成側で同じ書体を利用できるとは限りません。

まず、起きている現象を分けて考えます。

SVGにフォント名を書くだけでは足りない#

<text font-family="Corporate Gothic" font-size="30">
  製品仕様
</text>

このコードにはCorporate Gothicのデータがありません。制作PCにだけインストールされている場合、他の環境ではフォールバックします。

@font-faceでWebフォントを参照していても、CORS、認証、期限付きURL、Content Security Policy、オフライン環境などで取得できないことがあります。

確認するときは、ブラウザーの開発者ツールでFontリクエストの失敗を調べます。さらに、フォントを入れていない別の端末やプライベートウィンドウでSVGを開くと、制作環境への依存を見つけやすくなります。

日本語が画像PDFになる理由#

日本語をPDFテキストとして保持するには、日本語フォント、文字マッピング、埋め込み処理が必要です。基本PDFフォントだけで直接出力すると、欠字する危険があります。

SVG2IMGは日本語やカスタムフォントを検出すると、ブラウザーで描画して画像PDFへ切り替えます。目標は300 DPIですが、大きなページではブラウザーのメモリ使用を抑えるため、最長辺4096pxを上限として有効DPIを下げます。

画像PDFでは次の点に注意してください。

• 見た目を維持しやすい
• 文字検索とコピーができない
• スクリーンリーダーが通常のテキストとして読めない
• 大きく拡大したときの品質はピクセル数に依存する

対処方法は用途で選ぶ#

ロゴや短い見出しはアウトライン化#

デザインツールで文字をパスへ変換すると、フォントがなくても同じ形を表示できます。ベクターとして残しやすいため、ロゴ、パッケージ、短い見出しに向いています。

本文をすべてアウトライン化すると、ファイルが重くなり、修正・検索・アクセシビリティも失われます。編集用データは活字のまま別に保管してください。

英数字の簡単な図は標準フォント#

Helvetica、Arial、Times、Courierや汎用sans-serifなどは、基本ラテン文字の簡単なラベルに使いやすい選択です。ただし、フォント名を指定しただけで埋め込み済みになるわけではありません。出力後の確認は必要です。

日本語の見た目を優先するなら画像PDF#

日本語を含むグラフ、確認用資料、単ページのビジュアルなど、検索性よりレイアウト再現を優先する用途に向いています。長文資料、電子アーカイブ、アクセシブルPDFには適しません。

解像度を上げてもフォント問題は直らない#

ページを大きくしたりDPIを上げたりしても、読み込めていないフォントは復元されません。解像度で改善できるのは、すでに正しく描画できた文字の輪郭だけです。

拡張子を.svgから.pdfへ変えることも変換ではありません。フォント埋め込みには実際のフォントデータ、利用許諾、文字マッピング、PDFライブラリの対応が必要です。

フォントのライセンスも確認する#

デスクトップ利用は許可されていても、Web配信やPDFへの埋め込みを制限しているフォントがあります。アウトライン化した成果物の配布条件が定められている場合もあります。ブランドフォントを納品するときは、正規のライセンスとクライアントの利用範囲を確認してください。

書き出し前のチェック#

• プレビューで書体、太さ、改行が合っている
• 重要な短文は必要に応じてアウトライン化した
• 日本語が画像になっても検索性の要件を満たす
• 小さい文字を100%表示で読める
• 別の端末でもPDFを確認した
• 編集可能なSVGと正規フォントを保管した

SVG PDF 変換ツールでは自動判定と見た目優先の出力を比較できます。文字選択が不要で画像として使うなら、用途が明確なSVG PNG 変換も選択肢です。