WooCommerce PDF Invoices & Packing Slips日本語対応(フォント追加)

自分のハンドメイド作品の販売サイトを作ろうと、WooCommerceプラグインを使って準備をしています。
ちょっと格好つけて納品書とかPDFで出力したいなと思い、よいプラグインはないかなぁと探しているとWooCommerceにインボイス・納品書PDF出力をつけられるプラグイン見つけました！

めっちゃ便利でよくできてるプラグインなんですが、なんと日本語フォントに対応していない…。

調べるとプラグインのサイトにフォントの追加方法があったので日本語フォントを追加する作業をしてみました。

参考：Using custom fonts
 

1.プラグインフォルダ内のテンプレートフォルダを使用中のテーマファイルにコピーする

wp-content/plugins/woocommerce-pdf-invoices-packing-slips/templates/Simple
↓コピー
/wp-content/themes/使用中のテーマフォルダ/woocommerce/pdf/Simple-Custom
 

2.コピーしたフォルダ内にfontsフォルダを作成して使用したいフォントファイルを入れる

/wp-content/themes/使用中のテーマフォルダ/woocommerce/pdf/Simple-Custom/fonts
に無料で使える日本語フォントのIPAexフォントを入れました。

今回ゴシック体だけを使用するので、fontsフォルダにipaexg.ttfだけ入れました。
 

3.style.cssで使用したいフォントを指定する。

/wp-content/themes/使用中のテーマフォルダ/woocommerce/pdf/Simple-Custom/style.cssに
下記のように使用したいフォントについて追記します。

/* Load font */
@font-face {
    font-family: 'ipaexg';
    font-style: normal;
    font-weight: normal;
    src: local('ipaexg'), local('ipaexg'), url(<?php echo $this->get_template_path(); ?>/fonts/ipaexg.ttf) format('truetype');
}
@font-face {
    font-family: 'ipaexg';
    font-style: normal;
    font-weight: bold;
    src: local('ipaexg'), local('ipaexg'), url(<?php echo $this->get_template_path(); ?>/fonts/ipaexg.ttf) format('truetype');
}

その下にあるbodyのフォント指定を変更します。

body {
font-family: 'ipaexg','Open Sans', sans-serif;
}

これで日本語部分も正常に表示されるようになりました！