Custom Fonts

Bubble uses 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.

The Google Web Fonts library is so widely used that there's a fair chance that fonts you use are already cached in the browser of many of your users. In essence, this means that another website already has loaded the font for you and the user doesn't need to download it again.

This leads to a faster page load and smaller total page size.

Sometimes you will want to install your own font. For example, you might need the design to adhere to a style guide for a particular brand and use a commercial font that they have licensed.

This guide shows you how to install a custom font in your app. Once a font has been installed in your app, you will see it at the top of the list in the font dropdown.

Video lesson

Video:

Installing a custom font

The Custom Font section for your app is in the Settings tab, General & Design section. This is where you can add new fonts, and remove the existing ones if you do not need them anymore. In general, having fonts that are not used in the app will slow down page load, so we recommend only keeping fonts that are actually used in your pages.

You add a custom font by entering the path of the CSS file that represents the font. This assumes that the font file is accessible on a web-server. Note that if the resource is not served over HTTPS, your application may not be able to load the file if it is itself on HTTPS. In general, using the raw font files and uploading them to Bubble's storage is the safest way to ensure proper loading.

Adding a custom font from the raw font files can be a little technical, as you will need to upload the different files, create some CSS files and upload them as well. Here is how you should do this.

First, get the font files (for instance, download this one and upload it to Bubble. To do that, just use a file uploader in Bubble, place it on the page, and upload the file as the initial content. Once this is done you'll see a link below, just copy this link. It should look like https://df75617d22d69d4f007bdad2695600c7.cdn.bubble.io/f1718285189742x802757805147443100/FreeSans.ttf

Then, create a .css file in a text editor and copy the code you got from the site that offers the font.

@font-face {
  font-family: 'Free Sans';
  src: url('http://www.fontsaddict.com/fontface/free-sans.ttf');
}

and replace the URL by what you got in 1.

@font-face {
  font-family: 'Free Sans';
  src: url('https://df75617d22d69d4f007bdad2695600c7.cdn.bubble.io/f1718285189742x802757805147443100/FreeSans.ttf');
}

Note that we added https: in front of the URL.

Save this file font.css (for instance, the name does not matter), and upload it to Bubble as well, doing the same thing you did for the first step. It will return you a link that will look as well like

https://df75617d22d69d4f007bdad2695600c7.cdn.bubble.io/f1718285189742x802757805147443100/font.css

This is what you enter in the Settings tab. The name is the font name, and the path is the result of 3.

Note: Special characters in fonts are not automatically added and will default to Times. They can be manually added however, when adding your custom font as a <link>. For example, lets say you are adding the following Google Webfont to your Bubble app:

It is recommended that you add a second link with any special characters you'd like to include using the '&text=' parameter:

Other ways to learn