[Solved] Help adding font

Need help
1

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

2 Likes
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.
44 Likes
8

Thanks a lot! :slight_smile:

11

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

1 Like
12

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

13

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

15

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

16

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

17

it the app it still doesnā€™t work

18

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

19

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

20

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

21

Yes sorry I meant Google font as well.

22

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

23

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.

24

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

1 Like
25

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
26

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?

27

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

28

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.

12 Likes