> 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

Custom fonts let you use your own font files in your app. Learn how to upload .ttf and .otf files for web and native mobile apps, and how to move legacy CSS-linked fonts to the upload method.

Bubble uses [Google Fonts](https://fonts.google.com/) for its built-in fonts. 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.

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, in the *General* section. This is where you add new fonts and remove ones you no longer need. Keeping fonts that aren't used in your app can 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.

<figure><img src="https://34394582-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5sbzwG7CljeZdkntrL%2Fuploads%2F2Zdq2pUlPEbOOJEILKky%2Fcusto-font-upload.png?alt=media&amp;token=c2808656-8338-428e-a8c5-e99d3aec4b17" alt="The Custom fonts section with an Upload file button and a note that OTF and TTF files are accepted." width="494"><figcaption><p>You can upload a single font file, multiple files, or a whole folder for a font family.</p></figcaption></figure>

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 font 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)

With the legacy method, 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.