Custom Font Not Working On Computers Where Font Not Installed Locally

I’ve installed a custom font inside bubble but it’s not working anywhere that the font isn’t installed locally, although in the Settings screen i do see the font has changed to the correct font, and in the editor the font is being called, but when browsing the main website from any computer where the font is not installed, it defaults to times new roman.

Have I done something wrong?

Where is the font file being stored?

Another one of my servers. But not bubble.

Hmm, then it should work. Do you have a link I can test with my machine?

1 Like

See this link: http://powerhouseclientdemo.com/font-css.css

Interestingly the font loads correct under the settings screen and displays in Bubble editor OK but when you browse the website in a browser without the font loaded locally it doesn’t work.

In the link you sent, it looks like the src URL is referencing a local directory, not a web-hosted thing. I haven’t used a custom font on Bubble yet, but I would expect that the src would need to reference the entire URL of the location you’re hosting the font file? That’s the only thing I can think of. This might be why it works locally? Or I could be totally wrong.

Also, nice choice. I use Monsterrat a lot, but it’s built in to Bubble as far as I know (I’m using it at www.betterproduct.co). Not sure if Montserrat Light is there, but regular and heavy are available.

It is but not “Montserrat Light”.

At the very least an ability to upload an actual css file into bubble right at the Custom Font Settings screen would be in order.

Does the font need to be uploaded to bubble some way in order for it to work?

Has anyone hosted a font elsewhere and had it work on a computer without that font installed locally?

Bump on this… Does the custom font need to be installed on bubble’s server and hosted on aws some how?

Right now it’s on another server of mine http://powerhouseclientdemo.com/font-css.css but doesn’t work on machines where the font isn’t locally installed… interestingly, it works inside Bubble editor and Bubble settings screen “takes” the font… but doesn’t call it in the browser.

What is the URL of your app? Did you make sure the SSL protocol is the same? It doesn’t have to be hosted on Bubble’s servers.

testingapplication604 | Bubble Editor is the editor.

Live link to montserrat font page: https://testingapplication604.bubbleapps.io/version-test/collapsing_groups?debug_mode=true

I’ve installed the font here as you can see.

Right now it calls non ssl… No ssl installed on font hosting server. (http://powerhouseclientdemo.com/font-css.css)

Well that’s your problem right?..

2 Likes

Seems to be the problem!

T Y :slight_smile: