Using custom fonts

You may want to change the look of your pdf invoices & packing slips by using a different font. Some languages (Japanese, Chinese, etc.) are not supported by the default font included with the plugin, in this case a custom font is required.

Although the plugin supports webfonts, this is somewhat limited and has a lot of caveats, the most important issue is that the PDF library (responsible for converting the HTML to PDF) does not support numeric font-weights, and that’s what google outputs by default.

The best method is to create a custom template first, then add a fonts/ folder with the font files to that template and use the following code (replace the font names/filenames) to load the font in the style.css from the pdf template:

It is important to note that large fontsets (especially Chinese) results in very big PDF files, which is a limitation of the PDF library used. (also see “enabling subsetting” below)

<?php global $wpo_wcpdf;?>
/* Load font */
@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: local('MyFont'), local('MyFont'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/myfont.ttf) format('truetype');
}
@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: bold;
    src: local('MyFont Bold'), local('MyFont-Bold'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/myfont-bold.ttf) format('truetype');
}
@font-face {
    font-family: 'MyFont';
    font-style: italic;
    font-weight: normal;
    src: local('MyFont Italic'), local('MyFont-Italic'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/myfont-italic.ttf) format('truetype');
}
@font-face {
    font-family: 'MyFont';
    font-style: italic;
    font-weight: bold;
    src: local('MyFont Bold Italic'), local('MyFont-BoldItalic'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/myfont-bolditalic.ttf) format('truetype');
}

then make sure you assign that font family to the body or other elements of the template:

body {
	font-family: 'MyFont';
}

Some notes:

  • Only TTF fonts are supported.
  • You can’t use numeric font weights (like 700 instead of bold)!
  • Avoid spaces or special characters in the font filenames.
  • I have found that not all servers cope well with the font paths. If this is the case with your font, try to put the font in the root of your site and put that in the font url (i.e. url(http://yoursite.com/fonts/myfont-italic.ttf) )

Some font links:

You can reduce the file size of the font by enabling ‘subsetting’, by adding the following to your themes functions.php:

define("DOMPDF_ENABLE_FONTSUBSETTING", true);

However, this feature is not very reliable and may result in characters missing, so do test if this works with your font first!