> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Font Files

> Upload custom font files to Media Storage and use them in your Hoop funnels, websites, and emails.

Your brand identity relies on consistent typography. Hosting your font files in Hoop keeps them accessible and ensures your funnels, websites, and emails use your brand's exact typefaces.

## Supported font formats

The supported font file types are:

* `.ttf` — TrueType Font
* `.otf` — OpenType Font
* `.woff` — Web Open Font Format
* `.woff2` — Web Open Font Format 2 (recommended)

## Uploading a font file

<Steps>
  <Step title="Open Media Storage">
    Click **Media Storage** in the left navigation sidebar.
  </Step>

  <Step title="Click Upload">
    Click the **Upload** button in the Media Storage toolbar.

    <Frame caption="Upload button in the Media Storage toolbar">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/E5RqsVYHqu08Wwk2/images/media-storage-fonts-1.png?fit=max&auto=format&n=E5RqsVYHqu08Wwk2&q=85&s=5d5195eb4c066214bab6fd37103e32a7" alt="Click Upload in Media Storage" width="1639" height="439" data-path="images/media-storage-fonts-1.png" />
    </Frame>
  </Step>

  <Step title="Select a supported font file">
    Choose a `.ttf`, `.otf`, `.woff`, or `.woff2` file from your local device.

    <Frame caption="File picker showing font file selection">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/E5RqsVYHqu08Wwk2/images/media-storage-fonts-2.png?fit=max&auto=format&n=E5RqsVYHqu08Wwk2&q=85&s=56a459bf147a3563a7baff4977576349" alt="Select a font file to upload" width="1602" height="782" data-path="images/media-storage-fonts-2.png" />
    </Frame>
  </Step>

  <Step title="Upload and get the link">
    Once your font is uploaded, hover over it and click the three-dot icon to select **Get Link**. You can then reference this link as a Custom CSS font-face declaration.

    <Frame caption="Get Link option for the uploaded font file">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/E5RqsVYHqu08Wwk2/images/media-storage-fonts-3.png?fit=max&auto=format&n=E5RqsVYHqu08Wwk2&q=85&s=19d09425a6d161ea58c211572d8cda45" alt="Get the link for your uploaded font" width="641" height="352" data-path="images/media-storage-fonts-3.png" />
    </Frame>
  </Step>
</Steps>

<Note>
  This feature stores the font file in your media library for linking. It does not automatically add the font to the builder's font selection dropdown. To use the font, you will need to add it as Custom CSS. Consult a developer if you are unfamiliar with CSS font-face declarations.
</Note>

## Using custom fonts via CSS

To use an uploaded font across your funnel or website, add a custom CSS `@font-face` declaration referencing the media link:

```css theme={null}
@font-face {
  font-family: 'YourFontName';
  src: url('https://your-media-link.com/font.woff2') format('woff2'),
       url('https://your-media-link.com/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body, h1, h2, h3, p {
  font-family: 'YourFontName', sans-serif;
}
```

Add this CSS in the **Custom CSS** field found in your funnel or website's Settings tab.

## Font licensing

<Warning>
  Uploading a font requires that you have a valid license to use that font. Most commercial fonts require a web license. Using a font without the appropriate license may violate the font creator's terms.
</Warning>

Free and open-source fonts safe for commercial use:

* **Google Fonts** — hundreds of high-quality fonts available for free
* **Font Squirrel** — curated free fonts with desktop and web licenses
* **The League of Moveable Type** — open-source type foundry

<Tip>
  If you are using a Google Font, you do not need to upload it. Google Fonts are available directly in the page builder's font selector. Upload custom fonts only for proprietary brand typefaces not available on Google Fonts.
</Tip>