Custom Fonts working only on one computer

I am attempting to upload a custom font and have tried everything in the forum. When i view the editor on my mac which has the fonts installed locally there are no errors and it looks fine on the final site too. When I view the site on any other computer or phone the fonts default to times new roman, and in the editor on my windows computer I’m getting this error message for every font:

I’ve tried the following steps:

  1. Here’s my font file url after being uploaded onto bubble:
    //s3.amazonaws.com/appforest_uf/f1635813613042x233323095200654200/Radomir%20Tinkov%20-%20Gilroy-Regular.otf

font1

The documentation says nothing of the type of font file, so I assume .otf, ttf, woff,woff2 are all interchangeable?

  1. Now I am creating the css file with the following text exactly:

@font-face {
font-family: ‘GilroyRegular’;
src: url(‘https://s3.amazonaws.com/appforest_uf/f1635813613042x233323095200654200/Radomir%20Tinkov%20-%20Gilroy-Regular.otf’)
}

I’ve tried to not use dashes in the name (from Gilroy-Regular to GilroyRegular) as well as follow other comments about replacing the apostrophes.

  1. Saved as a .css file with encoding UTF-8 and uploaded onto the bubble.io editor with the name GilroyRegular

Here’s the link to that css file:
//s3.amazonaws.com/appforest_uf/f1635813857080x519410895178854500/GilroyRegularOTF.css

Here’s the link to the site: www.catalist.network/version-test/

I haven’t pushed to the live version since the fonts aren’t working, but I assume that this doesn’t matter. Any help would be appreciated - Thanks!

Here’s what the editor looks like on my other computer where I have the font installed locally (a mac)

1 Like

Thanks for posting! The most likely cause is that there’s a mistake in the CSS file you created while following the instructions to add the font to your app.

If you’re still getting the “Invalid: GilroyRegular could not be loaded” message that’s in that spot for your app right now, it means the app couldn’t load the font from the CSS you provided, in which case it’ll only display correctly on computers (and browsers) with the font already set up locally.

We would be happy to try and upload the font on our side to see if we can get it working. Do feel free to reach out with the relevant details to support@bubble.io.

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.