How do I use Google Fonts in a PDFMonkey template?

Copy the tag from Google Fonts and paste it at the top of your HTML tab, then reference the font family in your CSS. Loading fonts by URL requires a paid PDFMonkey plan.

Can I use custom fonts in PDFMonkey headers and footers?

Yes, but you must inline the font as a Base64 data URI inside a tag in the header/footer settings. External font URLs do not work in settings-based headers and footers.

How do I display emojis in a PDFMonkey PDF?

Emoji rendering is disabled by default. Open your template, go to the Settings tab, and toggle the emoji option on. Once enabled, emoji characters in your template or dynamic data will render in the PDF.

How do I display non-Latin characters like Chinese or Arabic in PDFMonkey?

Import a web font that supports the character set you need. Google Fonts offers fonts for Arabic, Chinese, Japanese, Cyrillic, Hebrew, and many other scripts. The default Open Sans font only covers basic Latin characters.

Web Fonts

Custom fonts let you match your brand identity and support non-Latin scripts in your PDFMonkey templates. This page covers importing fonts, using icon fonts, inlining fonts in headers and footers, handling special characters, and enabling emojis.

Paid account only

Loading external fonts via URL (including Google Fonts) is only possible on a paid account. Documents that include external fonts will fail on a free account. See External Resources for details.

As a workaround, free-plan users can embed fonts using data-URI. See the header and footer font inlining tutorial for an example of this technique.

Using Google Fonts

To import a font from Google Fonts, go to https://fonts.google.com/ and search for a font you like. Once found, you can select one or several variants (weight, italic, etc.) that you want to use.

In the right panel it will give you a <link> code that you can copy at the top of your HTML.

Let’s import Roboto by selecting its regular and bold styles for instance:

<!-- Importing Roboto, regular and bold -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Once you have added the font, you can use it in your CSS:

body {
  font-family: 'Roboto';
}

Other Font Services

Alternatively you can use any paid font-hosting service you’re subscribed to or simply use self-hosted fonts.

For those cases, import the fonts using a <link> tag pointing to the CSS of the font. This CSS and the font files need to be publicly accessible otherwise they will not load in PDFMonkey.

Icon Fonts

PDFMonkey does support icon fonts like Font Awesome or Material Icons. Please refer to the documentation of the font you want to use to learn how to import it.

Fonts in Headers and Footers

As stated in our header and footer documentation, headers and footers come with some caveats. Since the content of the CSS tab does not apply inside header and footer, fonts won’t apply either.

That said, there’s a rather technical solution you can use to bring your header and footer on par with the rest of the content.

Step 1: Get the fonts CSS

Select the fonts you want on Google Fonts, then get the URL they provide and copy its content. Let’s take the Dancing Script font and only select its Regular 400 variant. The URL we get is https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap

Upon visiting this URL the content we get is as follows:

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep6hNX6plRPjLo.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3ROp6hNX6plRPjLo.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v22/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

You can start by copying this content.

Keep only what you need

Unless you care about Vietnamese or extended Latin characters, you can just keep the “latin” section. It will cover the basic alphabet plus most of the western European alphabets and accents.

Step 2: Replace fonts URL with their data-URI content

Since fonts cannot be loaded from URL in the header and footer, you’ll need to replace the Google Fonts URL with a data-URI version.

You can find very good online converters that will do that for you. Some of them simply take a URL as input and will give you the data-URI version in return.

You can now replace the URL with the data-URI text you got.

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:font/woff;base64,d09GRgABAAAAAG6...') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Mind the quotes

Notice that when replacing the URL we also surrounded the content with quotes. Don’t forget to do so.

Step 3: Replace the data-URI scheme

As-is, the font will not work and the generation will fail. To make it work, we’ll need to remove what is called the MIME type of the data-URI content. Simply remove anything between data: and ;base64.

/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:;base64,d09GRgABAAAAAG6...') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Step 4: Give your header/footer some style

Now that we do have our font CSS working, you can add it to your template. Head to the Settings tab and enable the Advanced header/footer.

You can then paste your font CSS in a <style> tag:

<style>
  /* latin */
  @font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('data:;base64,d09GRgABAAAAAG6...') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  #header, #footer {
    font-family: 'Dancing Script';
  }
</style>

<div>This text should be using Dancing Script</div>

Header and Footer styles are shared

You don’t need to duplicate the font import in both header and footer as any style defined in one also applies to the other. That’s why we can use the #header, #footer selector in the above example.

Emojis

PDFMonkey can render emojis in generated PDFs. This feature is disabled by default and must be enabled per template.

To enable emoji rendering, open your template and go to the Settings tab. Toggle the emoji option on. Once enabled, any emoji characters in your template or dynamic data will render in the generated PDF.

Special Characters and Non-Latin Text

The default PDFMonkey font is Open Sans. While it’s a good enough looking font for most cases, it doesn’t cover much when it comes to non-Latin characters.

If you need to display non-Latin characters in your documents, you will need the help of a different web font.

Here are some frequently requested character sets on Google Fonts:

You can find more languages using the dedicated selection field on Google Fonts:

Frequently asked questions

How do I use Google Fonts in a PDFMonkey template?: Copy the <link> tag from Google Fonts and paste it at the top of your HTML tab, then reference the font family in your CSS. Loading fonts by URL requires a paid PDFMonkey plan.
Can I use custom fonts in PDFMonkey headers and footers?: Yes, but you must inline the font as a Base64 data URI inside a <style> tag in the header/footer settings. External font URLs do not work in settings-based headers and footers.
How do I display emojis in a PDFMonkey PDF?: Emoji rendering is disabled by default. Open your template, go to the Settings tab, and toggle the emoji option on. Once enabled, emoji characters in your template or dynamic data will render in the PDF.
How do I display non-Latin characters like Chinese or Arabic in PDFMonkey?: Import a web font that supports the character set you need. Google Fonts offers fonts for Arabic, Chinese, Japanese, Cyrillic, Hebrew, and many other scripts. The default Open Sans font only covers basic Latin characters.