Custom fonts in PDF generation: HTML to PDF and markdown to PDF

One insight we've had since launching our PDF APIs is that our customers find it extremely important to have their brand identity shine through in their PDFs. The typefaces a company uses are a big part of its brand identity. Typefaces can convey certain attributes and they can tie a design together. It makes sense that customers would want to use their chosen typefaces and fonts in the PDFs they generate.

We're excited to announce that you now can use custom fonts in both the HTML and markdown flavors of our PDF generation API endpoint. Now your HTML-rendered PDFs can look exactly as your design team intended. The summary:

• Markdown to PDF supports all fonts in the Google fonts library, plus a couple PDF-common fonts like Helvetica and Times New Roman.
• HTML to PDF supports custom fonts via the CSS @import directive and CSS's @font-face directive. With these two directives, you can use webfont providers like Google fonts, or self-host your own fonts.

Markdown to PDF custom fonts

Using custom fonts when generating PDFs from Markdown is extremely easy: just specify a fontFamily parameter with the font you'd like to use. Fonts in markdown-generated PDFs are configurable at both the document and individual field level. Here's a quick example:

POST https://app.useanvil.com/api/v1/generate-pdf
{
  // Use Google's Lato font at the document level
  "fontFamily": "Lato",
  "data": [
    {
      // This will use the fontFamily specified at the root
      "content": "Latooo!!",
    },
    {
      // Use Google's Roboto Mono font for only this piece of content
      "fontFamily": "Roboto Mono",
      "content": "I am Mr. Roboto",
    },
  ]
}

That's it!

The default fonts used are Noto Sans and Noto CJK. Currently, markdown-generated PDFs support the following custom fonts:

• Courier, Helvetica, and Times New Roman
• All Google fonts

Check out the markdown custom font docs for full details.

HTML to PDF custom fonts

Using custom fonts in your HTML / CSS PDFs is also very straightforward. You have two options here: @import and @font-face. Both approaches are only a couple lines of code. For context, here is a simple HTML / CSS PDF generation example.

POST https://app.useanvil.com/api/v1/generate-pdf
{
  "title": "Example!",
  "data": {
    "html": "<h1>Hello World!</h1>",

    // The following sections will only need you to update the "css" param here.
    "css": "html body { font-family: CUSTOM_FONT_HERE; }"
  }
}

For either custom font approach, you'll just need to update the "css" parameter in the above request to use a custom font. I'll show you with some examples below, or see the HTML to PDF custom font docs for full details.

Using @import

The @import directive is often used with webfonts like Google Fonts. Usage is simple: add the @import directive to the top of your css, then use the font family name in your CSS rules.

@import url('https://fonts.googleapis.com/css?family=Barlow:ital,wght@0,400;0,700;1,400;1,700');

html body {
  font-family: "Barlow", "Noto Sans", "Noto CJK", sans-serif;
}

The extra fonts specified here, "Noto Sans", "Noto CJK", sans-serif, are added to the end of the font-family declaration as a fallback. Like with markdown-generated PDFs, Noto is our default HTML font family. If your font doesn't support all characters you are trying to use, these extra fonts will tell the PDF renderer to use the Noto fonts for any missing glyphs.

Using @font-face

Similar to @import, using @font-face is just a matter of updating the CSS with your new rules. Usage has a couple more lines, but is very similar to @import

1. Add the @font-face rules to the CSS
2. Include the new font-family name in your CSS

An example using @font-face:

/*
  Note: at this time we only support fonts in the `TTF`
  file format. All other font types will be ignored.
*/
@font-face {
  font-family: 'Pacifico';
  src: url('https://example.com/fonts/PacificoNormal.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Pacifico';
  src: url('https://example.com/fonts/PacificoBold.ttf');
  font-weight: bold;
  font-style: normal;
}

html body {
  /* We include the default font stack as a fallback */
  font-family: "Pacifico", "Noto Sans", "Noto CJK", sans-serif;
}

Again, note that "Noto Sans", "Noto CJK", sans-serif are included in the CSS rule as a fallback.

Further reading

You can find the full PDF generation API details in the API docs. For font-related specifics, see the HTML-to-PDF-specific or markdown-to-PDF-specific custom font docs.

If you have questions, we'd love to hear from you at hello@useanvil.com.