# 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="/files/puVwyYyBIGyTaPbqMqS0" 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.lob.com/print-and-mail/integrations/creative-conversion-tools/figma-plugin/custom-fonts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.