> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/fonts.md).

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