# Fonts

* [Google Fonts](#fonts-googlefonts)
* [Adding Your Own Fonts](#fonts-addingyourownfonts)

### Google Fonts <a href="#fonts-googlefonts" id="fonts-googlefonts"></a>

You can specify the fonts you would like available to your Funnel Pages by selecting the Fonts option.

<figure><img src="/files/vFdlC81zXJ3OUBUojgPY" alt=""><figcaption></figcaption></figure>

Once Saved, selected fonts will be available as an option on text elements when designing your pages.

<figure><img src="/files/UGeAr3goXA4hgfPLhGiH" alt=""><figcaption></figcaption></figure>

### Adding Your Own Fonts <a href="#fonts-addingyourownfonts" id="fonts-addingyourownfonts"></a>

You may also choose to add your own , True Type, Open Type, and WOFF font files to use in the builder. Follow these steps:<br>

1. Upload your font file using the Maintenance file upload section of your funnel settings.

<figure><img src="/files/e8H3SpiQ8ocwADUbrHRb" alt=""><figcaption></figcaption></figure>

2. Once the funnel is published, your font will be located at <https://yourfunneldomain.com/your-font.woff> (“yourfunneldomain.com” and “your-font.woff” will be the actual names of your funnel domain and font file).
3. In the builder, you will need to edit your page and add the new font via the @font-face and a new CSS style. This will allow you to use your new font wherever needed on that page. To add the font to the CSS, add the following information to the CSS editor:

.your-font-class{\
font-family:'Your-font-Name', Helvetica, serif;\
}\
@font-face{\
font-family:'YourFontName';\
src:url(<https://yourfunneldomain.com/your-font.woff>) format('woff');\
font-weight:normal;\
font-style:normal;\
}\
\
For open Type fonts, the format would be:\
format('opentype');\
\
For True Type fonts, the format would be:\
format('truetype');

<figure><img src="/files/p5xTFrwsw84KCeuziuzU" alt=""><figcaption></figcaption></figure>

4. Once your new font file is added to the CSS with a corresponding class name, you will use that new class name to use that font wherever needed on that page. Select the text where the new font is needed and add the new class name in the settings menu. Once in th element's Settings menu, go to "Classes" and type the font class name in the area provided. Click "Enter".&#x20;

<figure><img src="/files/9cdmpibXS0qkO2PAPpYG" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/GYNedwA4k72IHUkb1gnx" alt=""><figcaption></figcaption></figure>


---

# 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.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/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.