Forum Academy Marketplace Showcase Pricing Features

[Solved] Help adding font

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.

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.

Thank you!

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

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.

Same problem: Loom | Free Screen & Video Recording Software

Read above for why it doesn’t work.

1 Like

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.

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!

4 Likes

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!


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

1 Like

@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:

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

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