How to add custom fonts in bubble.io?

Step by step guide on Setting up custom fonts in bubble.io

How to add custom fonts in bubble.io?

Why use Custom Fonts?

Typography plays a crucial role in application development, influencing an app's user interface and user experience.

While bubble.io provides many font options, sometimes your project needs a specific style not found in their library. Custom fonts allow you to stay on-brand with unique typography, create a visually distinct experience, and meet client specifications if you're working on a branded project.

Here is the step-by-step guide on how to add custom fonts:

Step 1: Download the font file

For this article, I am going to use a custom font named ‘Taylor Sans’ which is not part of the bubble.io editor. It has an ‘OFL (SIL Open Font License’ so I can use it here in this blog freely.

I have downloaded this font from here. This font family has 6 font files with different font weights. Here are the 6 font file names:

  • TaylorSans-Bold - 700

  • TaylorSans-ExtraBold - 800

  • TaylorSans-Light - 300

  • TaylorSans-Regular - 400

  • TaylorSans-SemiBold - 600

  • TaylorSans-Thin - 100

    For this font family, you need to set up each font file independently. Here in this article, I will upload only one file ‘TaylorSans-Bold.ttf’. You can replicate the same for other files.

Step 2: Upload the font file

All the font files will have the ‘.ttf’ extension so I will call it a ttf font file. Now open the bubble editor and place the file editor element on the dummy/test page.

A user interface showing a file uploader setup in a design editor. The sidebar features options for customizing the "FileUploader Font" element, including a placeholder text, upload button, and file settings.

Upload the ‘TaylorSans-Bold.ttf‘ file as a static file and copy the link generated in the dynamic link section once the file is uploaded.

Screenshot of a UI Builder showing the process of uploading a font file named "TaylorSans-Bold.ttf". The image includes the file uploader component, its properties panel, and instructions to upload files and save the file link.

Step 3: Create a CSS script I have mentioned below on Notepad

Copy the CSS I mentioned below and paste it on Notepad. I am using an online notepad for this article.

@font-face {
font-family: 'Font-title';
src: url('file-upoader-url');
}

After pasting the CSS script on Notepad, change the Font-tile (In this case, it will be ‘TaylorSans-Bold’) and use the saved URL from step 2 which you got after uploading the .ttfl file

In the URL, add ‘https:’ before // and the CSS script in Notepad will look like the image provided below:

A code snippet in an online notepad demonstrates a CSS  rule setting the font family to 'TaylorSans-Bold' with a URL source. Arrows indicate "Font-Title" and "Font-URL."

Step 5: Download the CSS font file

From Notepad, save this file and make sure to give the file name the same as font-title and give it a .css extension at the end.

A screenshot of an online notepad showing CSS code for a custom font named "TaylorSans-Bold". There's a "Save As" dialog open, with the filename set as "TaylorSans-Bold.css".

When you save it, it will be saved in the device as a ‘TaylorSans-Bold.css.txt’ file. Rename this file in your device as ‘TaylorSans-Bold.css’. Remove .txt from the file name.

Step 6: Upload the CSS font file

Now let’s come to the editor again and upload this .css file on file-uploader. Once uploaded, save the URL of css file as well.

Screenshot showing a file upload interface for a CSS file named "TaylorSans-Bold.css" with instructions to upload the file and save its URL. The interface includes settings for appearance, layout, and conditions.

Step 7: Add CSS Path in the bubble.io

Go to Settings → General → Custom fonts

A web interface for customizing fonts and importing design files from Figma. Includes input fields for font name, CSS file path, and Figma API key, with guidance on uploading font files and design imports.

Here make sure that the Font name value is the same as the font title, In our case it will be ‘TaylorSans-Bold’. Add CSS file path as URL saved in step 6 and add ‘https:’ before ‘//’ so it will look like the image below:

A screenshot of a settings page for configuring custom fonts and design import in an app builder. It shows a tab labeled "General," options for adding custom fonts with fields for font name and CSS file path, and instructions for importing design files from Figma. Red arrows point to specific sections.

Now click on Add Font and give it some time to load. It will look like the image below after added.

Screenshot of a web interface for adding custom fonts. Shows an example with the font "TaylorSans-Bold" and a CSS file path, with options for adding the font and a note about font libraries.

Step 8: Test the font in the application bubble.io editor

Add a text element in the editor and check the font where you will find ‘TaylorSans-Bold’ as an option for the text element.

UI interface showing the selection of "TaylorSans-Bold" font from a dropdown menu in a design software. The page is labeled "custom-fonts" and the text element is named "Text Taylor Sans - BOLD."

Follow the same steps for all the files of font-family.

This is how you add custom fonts with just a URL link and a few settings, you can elevate your app’s design to a whole new level. It’s fun, right? 😉