[Solved] Help adding font

Need help
50

as @ed11 pointed out, the titling is crucial. Try removing all the spaces in the font name, and ensure that you sue the same name in the CSS file, as well as when you type it in the Settings>Design field.

51

So, can anyone confirm that custom fonts actually work for Bubble sites on iOS?

I was using OTF and TTF fonts on my site, neither of which were displaying. I uploaded WOFF and WOFF2, and none of those work either.

To clarify, I am successfully uploading the fonts.

For those of you having trouble, I highly recommend creating a data type called FONT with a field for the font file, and a field for a name. Then make a page with a file uploader, and a button that creates a new entry for your font data type every time you hit the button. Otherwise I’m not sure how people are managing the files after they upload them.

Ensure you add “https:”

As @ed11 pointed out: the titling of your file is crucial. I was struggling, and then I was able to get Bubble to recognize the font when I removed the spaces from the font name in the CSS file, and then also removed the spaces when I typed the font name into the Settings>Design>Custom Font field.

52

Thank you!

53

I am not able to get custom fonts to work on mobile either.

54

Check on another machine that does not have the font files installed. If the fonts don’t display correctly on that machine, it means it’s your CSS sheets. In your settings panel it will look like the fonts were uploaded correctly, and there won’t be an error indicator of any kind. But it’s definitely the CSS sheets if these are the conditions you’re seeing.

Make sure you create them in an actual css editor like visual studio code.

If your CSS sheets are definitely correct, then just contact support or file a bug report.

55

Same problem: https://www.loom.com/share/d2168b6a681049dcb08465625f877035

56

Read above for why it doesn’t work.

1 Like
57

If anyone is still struggling with this, make sure you do your uploading of files on the live database and push to live. Uploading to dev database caused issues.

58

For anyone looking for a simple solution to use custom fonts in Bubble, I have created this free tool that returns the CSS file path for a font file for you to use in Bubble. Uploading custom fonts in Bubble is now super easy!

14 Likes
59

Hi, I just just tried to add a Chinese font and it succeed in Chrome , Edge in my Mac , but it failed in all my mobile browsers (Chrome , Edge) in my phone. How can I solve this issue ? THANKS!

chinese font-desktop
chinese font-desktop2792×2622 378 KB

WechatIMG424
WechatIMG4241080×2400 65.4 KB

60

DUDE! This took 15 seconds and worked perfectly. Umm, thank you?!!

2 Likes
61

@brian12 No problem! I faced this issue so many times I figured a tool like that would be super helpful for the community :slight_smile:

1 Like
62

Wow
 I just went round and round and round 
 finally this one worked. Thanks @Thimo

And this tool didn’t work first time with a font i downloaded
 so I recommend you check your fonts are OK or they just wont load.

Here is one that DIDNT work: //s3.amazonaws.com/appforest_uf/f1669172432714x860386521736213900/EudoxusSans-Bold.css
Font name: EudoxusSans-Bold
its a ttf

Here is one that DOES Work!
Test and see if its your fonts that have issues rather than the process:

Add these to your custom fonts settings page:

CSS file path:
//s3.amazonaws.com/appforest_uf/f1669172862359x722049464650984100/EudoxusSans-Bold.css

Font Name:
EudoxusSans-Bold

1 Like
63

Parabéns! Conseguiu solucionar um problemão pra min


64

Thanks so much! I kept getting errors before using the process from the Bubble tutorial, but this worked like a charm. Thanks so much!

1 Like
65

This is great, I got it to work, but was wondering if there is a pattern that would enable adding the bold/semi bold/italic etc. in one CSS file? Ideally so that bold/italic shows up in the bubble editor as other fonts do natively.

image
image840×298 18.3 KB

Thanks,
Chris

66

Thank you sooo much!

1 Like
67

Thank you very much for your help. It works great. I tried it before but failed because of Bubble’s very user friendly and clunky UX.

One more question. Where is the font and Css stored. A personal bubble account? Is it possible that one day they will no longer be accessible?

@Bubble. This is a great and easy way to integrate your own fonts without stress, it would be even easier to implement it in the app with one click and one upload. Bubble is a great tool, but for the UX it gets only 2 star rating.

68

It is stored in a Bubble AWS bucket. The chance that it will not be available in the future is really really small, I would say 0.

1 Like
69

This isn’t working for me. It says the font is invalid. I am trying with an otf file.