WordPress + WooCommerce環境で、注文／発送完了メールに自動的に領収書や納品書PDFを添付する表記プラグインPrint Invoice & Delivery Notes for WooCommerceですが、Edgeでは表示できるものの、AcrobatやiOS/macOSの「プレビュー」では文字化けしてしまいます。
Acrobatではこうしたエラーも。
■Step1. 全化けに対処
どうもフォントの埋込みに失敗しているっぽい。このプラグインには「WooCommerce」→「Print Invoices & Delivery Notes」→「Settings」→「Font Setting」にフォントをアップロードする項目があります。
これをいつどうやって設定したか覚えていませんが、こうなっていました。
NotoSansJP_v5.ttfと同_boldがアップされている状態。これを改めて「Download Noto Sans JP→」リンクからGoogle Fontsにとんでダウンロード。解凍すると以下のファイル群が出てきます。
_v5がついておらず、-Regularがついています。ファイルサイズも1/3くらい。v5をどこから拾ってきたアップしたのか覚えていませんが、とりあえずv5を一度削除（Remove）して、RegularとBoldをアップロード。
これで、大半の文字化けが治りました。
Step2.「領収書」見出しとショップ名の文字化け対策
しかし、まだ完璧とはいかず、先頭部分になにやら「NO GLYPH」のような表示が残ります。
HTMLプレビューでは上が「領収書」、二段目が店名のようです。これがPDF時点ではこうなってしまいます。
生成されたPDFをpdfontsコマンドで覗いてみると、
|
1 2 3 4 5 6 |
% pdffonts 道具眼ショップ_領収書-20260630-85758a7a16b63eab6a708e1b.pdf name type encoding emb sub uni object ID ------------------------------------ ----------------- ---------------- --- --- --- --------- SUBAAB+NotoSansJP-Regular CID TrueType Identity-H yes yes yes 8 0 SUBAAC+NotoSansJP-Bold CID TrueType Identity-H yes yes yes 13 0 SUBAAD+Inter-SemiBold CID TrueType Identity-H yes yes yes 18 0 |
先程の、2フォントに加え、Interという欧文フォントが内部で使用されていることがわかりました。しかし、プラグインの設定画面にはこの第三のフォントを上書きする欄がありません。
そこでClaudeさんに相談して提案されたのが、HTMLプレビュー時点の「領収書」タイトルと店名のスタイルシートを上書きする方法。開発者モードでそれぞれのクラスを調べると、.wcdn-titleと.wcdn-shop-nameでした。これをちょちょいと上書きしてここのNotoSansJPを使用するように書き換えるPHPコードをfunctions.phpに書いたら、見事最後の文字化けも解消しました。
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter( 'wcdn_template_css', function ( $css, $context = '', $data = null ) { $css .= ' * { font-family: "NotoSansJP", sans-serif !important; } /* 600(セミボールド)は登録フォントに無く Times に落ちるため、Bold(700)へ一括で寄せる */ .wcdn-title, .wcdn-shop-name, [style*="font-weight: 600"], [style*="font-weight:600"] { font-weight: 700 !important; } '; return $css; }, 20, 3 ); |
将来的にはプラグイン自体が修正されて、第三フォントの上書き設定項目が追加されるかも知れませんが、やってることは既存の2フォントへのフォールバックで、きちんと極太ウェイト（600）にもなっているので、フィルターを消し忘れても実害はないかなと思います。
スマホから
