How to Customize Fonts

Some designs have settings controlling which fonts are used for text and headers, but if not, or you need more control (eg to specify the font for specific content, or use a different font than what’s provided), you can specify the font using CSS.

Some of the font settings available in the Classic Digital and Classic Print-Ready Designs. If these aren’t sufficient you’ll need to use a bit of CSS.

You specify the font for the PDF using CSS just like you would for a webpage. That means you can use Google Fonts or any fonts that can be accessed online.

/* Declare a new font-family and set the URL of where to find the font file.*/
@font-face {
	font-family: Loverstruck;
	src:url(https://www.heritagehillfarm.ca/wp-content/uploads/2019/11/Loverstruck.ttf);
}
/* Use that new font in headers h1-h5 and anything with the CSS class "has-large-font-size" */
h1, h2, h3, h4, h5, .has-large-font-size{
	font-family: Loverstruck !important;
}

For example, you can

  • Find a font you like on Google Fonts
  • download the font file and then upload it to your website
  • add some custom CSS to your PMB design to declare a new @font-face and specify where to use it (like in the example code snippet)

PMB Pro Print Service uses Prince CSS which has excellent documentation on how to customize fonts in documents using CSS.

But, as usual, if you need help figuring this out please reach out using the plugin’s help page.