Using Custom Fonts
Bubble uses Google Web Fonts for text types. Google Web Fonts is a library of open-source, freely usable fonts for the web, hosted by Google. In general, we recommend using Google Web Fonts as much as possible, as they are widely used on the Internet, which offers some interesting caching. It is likely that another site will have loaded the font you use, leading to faster page loads. It may not contain a specific font you are familiar with but it often has a very similar open source one. However, if you need to install your own font, you can do this in the Settings tab. Once a font has been installed in your app, you will see it at the top of the list in the font dropdown.
Our Academy tutorial on how to install your own 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 (and this is true for many things in Bubble), 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 http://www.fontsaddict.com/fontface/free-sans.ttf4 and upload it to Bubble. To do that, just use a file uploader in Bubble, draw 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
//s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/FreeSans.ttfThen, 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://s3.amazonaws.com/appforest_uf/f1482852801693x129632627358660100/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
//s3.amazonaws.com/appforest_uf/f1482852801693x129632627328660100/font.cssThis 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:
<link href="link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];700" rel="stylesheet">
It is recommended that you add a second link with any special characters you'd like to include using the '&text=' parameter:
Last modified 1yr ago