Using custom fonts

Table of Contents

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 you can use Google fonts, this is somewhat limited due to the fact that the PDF library we use (dompdf) only provides limited support for 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 font sets (especially Chinese) results in very big PDF files, so you will want to enable font subsetting if the font files that you use are big (see “enabling subsetting” below)

/* Load font */
@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: local('MyFont'), local('MyFont'), url(<?php echo $this->get_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 $this->get_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 $this->get_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 $this->get_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';
}

Enabling font subsetting #

By default, the entire font file that you use will be embedded in the PDF. This is done because the PDF (“Portable Document Format”) file format was designed to be portable across different systems and not dependent on whether a particular font is installed. This can drastically increase the file size of your PDF. By enabling the option “Enable font subsetting” in the General tab of the PDF Invoice settings, only the characters from the font that are used in the document will be embedded. While this will limit the ability for editing the PDF files in external editors (which could be considered a good thing), it will make your PDF files significantly smaller.
We do recommend testing how your font responds to this option, because it doesn’t always work very well. Try creating a PDF with a large set of different characters as well as a “normal” invoice PDF – if everything looks ok you can safely enable this option.

Some notes #

  • Only TTF fonts are supported.
  • If you use numeric font weights, make sure to include the font files corresponding to those font weights in your CSS declaration (one file per @font-face declaration, setting the numeric value for the font-weight property.
  • Avoid spaces or special characters in the font filenames.
What are your Feelings