# 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.&#x20;

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 Stylesheet (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:

<figure><img src="https://1775164782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiXDYGxBp6aAwhpEhTMNC%2Fuploads%2Fp7LQ89DjwGt3TitTRbiD%2Fimage.png?alt=media&#x26;token=7e7d67d4-1919-4465-ac5e-41100a94dbc3" alt=""><figcaption></figcaption></figure>

Example content of `lato.css`:

```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