Forum Academy Marketplace Showcase Pricing Features

[Solved] Help adding font

Hello,
I asked several people to add a font for me and I even tried myself but I keep getting the default font. Can anyone get is to work?

font with code: http://www.fontsaddict.com/font/free-sans.html

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.
30 Likes

Thanks a lot! :slight_smile:

This solved my problem but why do I keep getting the default font in the bubble app?

Try adding another text element with a default bubble font, then load your app in a preview

only a few fonts like lato and arial work but they look different than from the web

Still, none of the fonts work.
Here it is if you want to take a look: https://bubble.io/page?name=index&id=bets&tab=tabs-1

It looks like it might have been fixed - try it now

it the app it still doesn’t work

Do you mean in a native mobile app?

If so, I don’t know, sorry :frowning:

Maybe try reinstalling it? I’ve no idea how font’s are used in native applications

We do not support custom fonts in the native app, as the HTML is generated only once.

Oh okay, but some of the google fonts are not working

Yes sorry I meant Google font as well.

Oh ok, I’ll try to type the text in PS and upload to Bubble as an image.

Hello, This is my first post in the forums. I’m a new user, not a coder, but quickly hooked by Bubble!

I had a similar problem as Rao, but it was quickly solved for me by logging out and logging back in.

Will mention that the app I am working on is not live yet, and is being developed as a web app, not native app yet. Will update again if I notice changes once going live or hosting.

Hi,

I followed these instructions exactly to add the font ‘century gothic’ - and it worked well…

However have noticed two issues:

  1. When I open the website on an iPhone (Safari browser) the font does not load, and Times New Roman is used. This is a critical one for me to solve.
  2. On all devices / browsers - once a condition makes a text box using the font = bold, it doesn’t seem to ever be able to not be bold anymore.

Can anyone share any insight here?

Regards,
Andrew

2 Likes

Regarding iOS/Safari, older versions I know only render SVG (not eot, woff, or woff2).

For the bold one, I’m unsure why that’s happening, but I personally try to use the actual bold (or typically semibold) weight of the font instead of using the editor to bold the font.

1 Like

I’ve followed these instructions perfectly, but my custom font is still not rendering as expected. Are there any other considerations involved? I’m using WOFF2 font. I’ve named the font in Bubble using standard convention: for example, Fabriga (regular). My CSS files are structured correctly. I’m out of ideas here. Anyone?

Still cannot get custom fonts to work. I’ve tried woff2 and woff. Everything appears to be correct according to the directions above. When I try to display a custom font and look in Preview mode, I see the following in the elements tree in Chrome inspector:

<html lang="en" class="wf-rubik-n4-active wf-opensans-n3-active wf-opensans-n4-active wf-rubik-n5-active wf-rubik-n7-active wf-rubik-n3-active wf-rubik-n9-active wf-lato-n4-active wf-heebo-n5-active wf-heebo-n7-active wf-heebo-n8-active wf-kalam-n3-active wf-heebo-n4-active wf-heebo-n3-active wf-fabriga-n4-inactive wf-active" <<< my custom font is called Fabriga, and note that it’s marked “inactive”

A bit below that, within a script tag, I see my custom fonts listed as expected:

WebFontConfig = { 'google': { families: ["Lato","Heebo:300","Heebo:500","Heebo:700","Heebo:800","Kalam:300","Rubik:300","Rubik:500","Rubik:700","Rubik:900","Open Sans","Heebo:regular","Open Sans:300","Rubik:regular"] },'custom': { families: ["Fabriga:700"], urls: ["//s3.amazonaws.com/appforest_uf/f1522961662412x370678633451461760/fabrigabold.css"]}, active: function() { window.google_web_fonts_active = true; if (window.google_web_fonts_active_cb) { window.google_web_fonts_active_cb(); } }, fontinactive: function() { console.log('fontinactive being called, Google says the fonts didnt render'); window.google_web_fonts_active = true; if (window.google_web_fonts_active_cb) { window.google_web_fonts_active_cb(); } } } window.WebFont.load(WebFontConfig);

In the console, after the page loads, I’m seeing the error mentioned above associated with fontinactive: “fontinactive being called, Google says the fonts didnt render”.

So … the font is listed among the custom fonts. It seems to be recognized by Bubble. I even tried to name it using the same convention shown for the others (though I’ve tried naming it all sorts of ways without luck) just in case that mattered.

Has anyone gotten custom fonts to work? If so, are there any other instructions or considerations beyond what @emmanuel describes above?

Thank you.

-Ed

Apparently name matters. I was finally able to get custom fonts to work by using only alphanumeric characters in the font family name, which is counterintuitive when you’re adding multiple font weights and trying to follow the Bubble / Google Fonts naming convention. The following two notes would have been helpful as part of the instructions above:

  1. In your CSS file, the font-family string name should use alphanumeric characters only (no parentheses, colons, etc.)
  2. The name you give your font within Bubble must match the font-family string in your CSS file exactly.

Once those became clear, I added multiple fonts in just a few minutes.

10 Likes