[Solved] Help adding font

Need help
2

So this step is a little technical, but it’s doable if you follow this carefully. What you want to enter to Bubble is a link to the CSS file. The CSS file itself will reference the font files. Best is to host both the CSS file and the font files on Bubble’s storage so that it’s simpler

  1. Get the font files (for instance, download this one http://www.fontsaddict.com/fontface/free-sans.ttf) 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.ttf

  2. create .css file in a text editor and copy the code you got from the site.

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

and replace the src 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 I added the https in front of the URL.

  1. Save this file font.css (for instance), and upload it to Bubble as well doing that same thing as 1). It’ll get you a link that will look as well like

//s3.amazonaws.com/appforest_uf/f1482852801693x129632627328660100/font.css

  1. This is what you enter in the Settings tab. The name is the font name and must match the font family name in the CSS file, and the path is the result of 3.
42 Likes