> For the complete documentation index, see [llms.txt](https://help.lob.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.lob.com/print-and-mail/integrations/creative-conversion-tools/figma-plugin/custom-fonts.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.