Using custom fonts in your Bubble app (2024)

A quick way to upload and use custom fonts in your bubble.io apps.

Limitations

Bubble, despite being one of the most powerful no code tools out there, comes with only a limited number of fonts. This ensures that when a project comes along with a font outside that list, you’d need to upload a custom font to be able to use it in your app or project.

Personalisation

There are some cases where you just want a particular custom font to convey a particular feeling to your apps’ users. In this case, you’d most likely have downloaded or paid for a unique font/font family.

It goes without saying that Bubble will also not have the font, and you’d need to upload your custom font in order to use it for your project.

Now you can pretty much pay for and download what ever font you want to use in your project, but keep in mind that this method will require the use of the font’s OTF or TTF filetypes.

I prefer using OTF as they are more compatible with internet browsers. Another thing to note is that you’d need to upload each font style (e.g. medium, regular, bold, semibold, etc.) as bubble can’t yet create whole styles from your custom font.

Upload each font style of your custom font using this method to ensure that your app contains all the styles you need.

Download your font file and locate the style(s) you want to upload on your bubble app in your file explorer or finder(Mac)

Using custom fonts in your Bubble app (2)

Now, navigate to https://bubble-font-uploader.bubbleapps.io/version-test. This is a bubble app built by @thimo on twitter that converts your OTF file into a CSS file which bubble can read.

Using custom fonts in your Bubble app (3)

Why do we have to convert our file?

This is because bubble reads fonts in a different format from how we download them from font foundries and font collections.

You can see this in the Settings tab, under “General”

Using custom fonts in your Bubble app (4)

We download fonts in OTF, TTF, WOFF, or WOFF 2 filetypes, while bubble reads CSS font paths.

The above bubble app helps convert our file into a format(path) easily read by bubble, for use in our app.

Using the CSS path generator

Now that you understand why we need to convert our font, let’s get right to it.

On the CSS path generator app, click on the input field showing “upload your font file”(where else would we click?).

Select your file and click “Generate CSS file path”

Using custom fonts in your Bubble app (5)

The application will generate a file name and a CSS path from your uploaded file, as shown below:

Using custom fonts in your Bubble app (6)

Copy those values, and input them into the relevant inputs on bubble, then click “Add font”.

Using custom fonts in your Bubble app (7)

Voila! Your custom font has been added to your bubble app.

You can re-confirm this by switching to the style tab and checking the style variables sub-tab.

Using custom fonts in your Bubble app (8)

And that wraps it up! Go on and use this to create wonderful and great looking applications.

Happy building!