Using Custom Fonts in Documents

Check the font list first

Open your theme's Typography tab and look through the font dropdown. If your font is listed, select it and you're finished. You don't need any CSS.

Get the font's CSS

A font that isn't on the list has to be loaded with an @font-face rule. For a Google font, you can copy the rule straight from Google:

1. Find the font on Google Fonts, then choose Get font and Get embed code.
2. Find the address in the embed code that starts https://fonts.googleapis.com/css2, and open it in a new browser tab.
3. Copy the block or blocks under the /* latin */ comment. A font with separate files for each weight has several, so copy one for every weight you'll use, including bold.

Here's what the block looks like for Quicksand:

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  src: url('https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hK1QN.woff2') format('woff2');
}

Add the font to your theme

1. On the theme's Custom CSS tab, paste the @font-face CSS.
2. On the Typography tab, change the font to Custom… for Body Text and each heading you want to change.
3. In the box that appears, type the font's name exactly as it appears after font-family, without the quote marks. The box starts with the previous font's name, so replace it.
4. If your documents have tables, do the same for Table Header and Table Cell on the Advanced tab. They have their own font settings and won't pick up the change otherwise.
5. Save the theme, then generate a PDF from a template that uses it. Check the PDF itself, because a font can look right in the preview and still not reach the finished document.

For more on what you can do with templates, see Customising Documents and Emails.

Using your own font file

You can also load a font you've bought or had made. Use the same @font-face rule, with the url pointing at your file. The file needs to be:

• At a public https:// address, ideally in WOFF2 format.
• On a server that allows other websites to load it. Whoever manages your website will know this setting as CORS.
• Licensed for embedding in documents. Check with whoever supplied the font.

If the font doesn't appear

• The whole document uses a different font. Check that the name on the Typography tab matches font-family exactly, that the Custom CSS tab has no @import line in place of the @font-face rule, and that the template uses this theme.
• Only the tables look different. Change Table Header and Table Cell on the Advanced tab.
• Bold text looks wrong. The bold weight probably isn't loaded. Go back to Google's CSS and copy the block for that weight as well.
• Emails show a different font. That's expected in many cases. Email programs such as Gmail and desktop Outlook ignore downloaded fonts and show a standard font instead.