Embed 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 embedded 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.

Embedding Fonts When Generating PDFs from Markdown

Using embedded 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 fonts:

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

Check out the markdown custom font docs for full details.

Embedding fonts for HTML to PDF

Using embedded 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 embedded 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.

Simplify Your PDF Generation Workflow with Anvil

Discover how Anvil can make your PDF creation smoother and more efficient:

• Explore our PDF Generation API Documentation: Get detailed information on our API and all its features for customizing your PDFs.
• HTML to PDF Font Documentation: Learn about embedding fonts in HTML PDFs with our comprehensive guide. Make your HTML PDFs look exactly how you envision them.
• Markdown to PDF Font Documentation: Get all the information you need for using custom fonts in Markdown-to-PDF conversions. Ensure your Markdown documents maintain their brand identity.

Sign up for Anvil to start using our PDF generation tools and easily embed fonts into your documents.