Custom Fonts

When you translate your designs from Figma to Lob, sometimes the fonts you've chosen might not be publicly available. If your brand uses a custom font (ie. fonts not available at https://fonts.google.com/), we need access to the versions of that font you’re using in order to port your dynamic creative to Lob. Don't worry—we've laid out instructions for how to host custom fonts yourself here:

Step 1: Collect Your Font Files

You will need every variation of the custom font used in the file. This means any combination of weight and style.

Let’s say for the purposes of demonstration, we’re using font family Lato with regular, bold, and regular-italic variations.

🍎 On a Mac:

1. Open Finder.

2. Press Cmd + Shift + G.

3. Type or paste the following paths:

   • System Fonts: /System/Library/Fonts

   • User-installed Fonts: ~/Library/Fonts

   • All Users (Shared): /Library/Fonts

Copy your custom font files (.ttf, .woff, .woff2) from these folders.

---

🪟 On Windows (PC):

1. Open File Explorer.

2. Navigate to:

   C:\\Windows\\Fonts

3. Copy your custom fonts from here.

*OTF files are not supported, translate them to ttf or woff first!

Step 2: Host the Font Files

• Upload each font variation to an external hosting service

• Ensure your files are publicly accessible, meaning anyone can access the file from anywhere.

In our example, we would have URLs for lato-regular.woff2, lato-bold.woff2, and lato-regular-italic.woff2

Step 3: Create a Spreadsheet (CSS file)

You'll create a file named after your font family, like lato.css. This file tells Lob how to use your fonts. Key components include:

• font-family : will always be set to the name of your font

• src: the URL at which your font is hosted

• font-weight: the “boldness” of the font variation

• font-style: either ‘normal’ or ‘italic’

Font weights:

Example content of lato.css:

@font-face {
  font-family: 'Lato';
  src: url('<https://yourwebsite.com/fonts/lato-regular.woff2>') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('<https://yourwebsite.com/fonts/lato-bold.woff2>') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('<https://yourwebsite.com/fonts/lato-regular-italic.woff2>') format('woff2');
  font-weight: normal;
  font-style: italic;
}

Step 4: Host Your CSS File

• Upload your CSS file to the same external hosting site

• Again, make sure the link to your CSS file is publicly accessible.

Step 5: Include Your CSS File in Your HTML

Back in Figma to Lob, when you export, you will be given a prompt to map the file to the CSS