> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/variables-and-styles/using-custom-fonts.md).
# Custom fonts
Bubble uses [Google Web Fonts](https://fonts.google.com/) for text types. This is a big library of open-source fonts that can be freely used, and the font files are stored on a Google server. Your easiest option when designing in Bubble is to use one of the fonts available in this library.
{% hint style="info" %}
The Google Web Fonts library is so widely used that there's a fair chance the fonts you use are already cached in the browser of many of your users. In essence, this means another website has already loaded the font for you, and the user doesn't need to download it again.
This leads to a faster page load and a smaller total page size.
{% endhint %}
Sometimes you'll want to install your own font. For example, you might need the design to follow a style guide for a particular brand and use a commercial font that they've licensed.
This guide shows you how to install a custom font in your app. Once a font is installed, it appears at the top of the list in the font dropdown, and it works the same way on both web and native mobile apps.
## Installing a custom font
You'll find the custom font section in the *Settings* tab, under *General*. This is where you add new fonts and remove ones you no longer need. Keeping fonts that aren't used in your app will slow down page load, so we recommend keeping only the fonts your pages actually use.
To add a font, upload the font file itself. Bubble accepts .ttf and .otf files. You don't need to write any CSS or host the font anywhere: upload the file and Bubble takes care of the rest.
You can upload a single font file, multiple files or a whole folder for a font family.
A font family usually comes as several files, one for each weight and style (for example, Inter-Regular.ttf, Inter-Bold.ttf, and Inter-Italic.ttf). You can upload them in a single step.
You have a few options:
* A single file on its own
* Several files at once
* A whole folder for a font family
Bubble reads each file, recognizes the font family it belongs to along with its weight and style, and groups the files under one family. Once uploaded, the family is available everywhere you choose a font: on elements, in styles, and in style variables. The weight dropdown for that family only offers the weights you've uploaded.
{% hint style="info" icon="mobile" %}
A font uploaded this way renders the same on your web app and your native mobile app, from a single upload. There's no separate step for mobile.
{% endhint %}
## Moving from CSS-linked fonts (legacy)
Previously, you added a custom font by entering the path to a CSS file that referenced the font. Fonts you've already added that way will keep working on the web with no change.
Two things to know:
* You can no longer add a new font through a CSS file link. New fonts are added by uploading the font file, as described above.
* CSS-linked fonts don't render in native mobile apps. Only uploaded font files do.
To bring an existing CSS-linked font to mobile, or to move fully onto the upload method, upload the .ttf or .otf files for that family using the steps above, then remove the old CSS link.
{% hint style="info" %}
**Note on special characters:** This applies to the legacy CSS-link method only. Special characters in fonts aren't added automatically and will default to Times. You can add them manually when adding your custom font as a ``. For example, if you're adding the following Google Webfont to your Bubble app:
{% code overflow="wrap" %}
```html
```
{% endcode %}
We recommend adding a second link with any special characters you'd like to include, using the `&text=` parameter:
{% code overflow="wrap" %}
```html
```
{% endcode %}
{% endhint %}
---
# 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://manual.bubble.io/help-guides/design/variables-and-styles/using-custom-fonts.md?ask=&goal=
```
`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.