How to Upload Custom fonts in Bubble.io
Uploading fonts to Bubble isn't straightforward, but this tutorial will save you a ton of time.
Hello fellow Bubblers,
If you’re a designer like me, or you just want to explore a very specific aesthetic in your app, chances are you’ll need to upload new fonts into Bubble. Bubble comes with built-in fonts from Google fonts and, for the vast majority of cases, these fonts work just fine. However, if the fonts in your design aren’t in the Google fonts library, you’ll need to upload them into Bubble. This tutorial will help you do just that and hopefully will save you tons of time and headache.
Step 1. Download your font
To get started, you’ll first need to get the font you’re going to use (if you haven’t already). If you’re downloading a free font, make sure that the license of the font you’re downloading applies to your use case. For this example, I’ll be using a font called RiseStarHand from Font Library.
After downloading the font, open the zip file and you’ll see all the different styles of the font in a folder - light, regular and bold in this case.
Step 2. Convert your font
Fonts can come in different formats (ttf, otf, woff…). One thing that’s important to know is that some browsers don’t display certain font formats. So while your font may look fine in one browser (e.g. in Chrome), it might not display at all in another browser (e.g. Safari). This has happened to me before in an app I built. To mitigate this, you’ll need to upload different formats of the same font into your Bubble app.
Since the download of this font only came in one format, to get other formats of the font I’ll use an online converter. Cloud Convert does this really well. You can choose which format you want to convert to/from and the app will do the rest. Once converted, download the fonts in the new formats.
Step 3. Upload your fonts to Bubble.io
With your fonts downloaded in different formats, you’ll then need to upload each format into Bubble. The simplest way to do this is to go your Data Tab, then select the File Manager tab. You’ll then see a button labeled ‘Upload’ - click on it and upload each font.
You should now have something like this:
Step 4. Create your CSS file
Your font files are now uploaded to Bubble! However, to use them, you’ll need to create a CSS file that combines each format. This next phase is rather involved, but if you follow these steps closely, you’ll be fine.
First, you’ll need to copy the following code and paste it into notepad (for Windows) or Textedit (for Mac).
@font-face {
font-family: 'FONTNAME';
src: url('LINK')
format('otf'),
url('LINK')
format('ttf'),
url('LINK')
format('woff')
}
Note: If you’re using a mac, you’ll need to make sure that you change your editor to plain text by going to Format → Make Plain Text.
The only things we’ll replace are FONTNAME (with the name of the font we’re uploading), and LINK (with the link to the file we uploaded in Bubble).
Important: To avoid errors in Bubble, make sure you keep the names of your files consistent with the names of the font files you download - i.e. same capitalizaton and punctuation.
We’ll start with the Light style of the font. In this illustration these are RiseStarHandLight.otf, RiseStarHandLight.ttf, and RiseStarHandLight.woff)
To get the link of each file, left-click on the option and select ‘Copy Link Address’
Once copied, replace the LINK text in the code in your editor with the link to your font, and ensure the url is between the ‘‘. Also, make sure that the link you copy for each version matches the format section beneath it (otf link with otf format, and so on).
It should now look something like this:
@font-face {
font-family: 'RiseStarHandLight';
src: url('https://s3.amazonaws.com/appforest_uf/f1657798097268x390724645830751400/RiseStarHandLight.otf')
format('otf'),
url('https://s3.amazonaws.com/appforest_uf/f1657798083156x196711580595845470/RiseStarHandLight.ttf')
format('ttf'),
url('https://s3.amazonaws.com/appforest_uf/f1657798090476x944885754678424200/RiseStarHandLight.woff')
format('woff')
}
With all the links copied, save your file as a css file. This is as easy as just adding .css at the end of your file name. The name of the File should match the name of the font you are linking to (in this case RiseStarHandLight.css).
You’ll then repeat this process for the other font styles (e.g. regular and bold), and save those as their own CSS files.
Step 5. Upload your CSS file.
Back in Bubble, you’ll need to click on the Upload button again in the File Manager tab, and upload the CSS file you just created. You’ll then need to copy the address for this CSS file.
Next go to the Settings tab in Bubble, and select General. Scroll to the bottom of the page until you reach the section labeled ‘Custom fonts’.
In the Font Name input, type in the name of the font exactly as you saved the file name. In the CSS file path input, paste the link you copied from the CSS file, then click on ‘Add Font’. You’ll notice the uploaded font appear above.
Do the same for each of the other CSS files.
With font uploaded:
Your font is now live on your Bubble app! You can now find it in the editor:
If you check your page on different browsers, you should notice that the font shows up as expected on each browser.
I hope you found this article helpful and that it saves you a ton of time with uploading custom fonts. Feel free to drop any questions or thoughts you may have in the comment section.
If you enjoyed the article or found value in it, please share it with others who you believe would find it helpful!
Happy Bubbling!
- Shiku
Another great tutorial! Adding custom font for the first time is not easy and this is going to be very helpful.