[New Feature] Using Custom Fonts

@battenjoe
did you find the answer?

No not yet

Thanks

Ive been having the same problem. All the font I upload always have that error.image

Me too

probably an error when you copy

@font-face {
font-family: ‘AlbraBold’;
src: url(‘https://s3.amazonaws.com/appforest_uf/f1617815788419x6767292184004834200/Telenet-Albra-Bold.ttf’);
}

Be aware that sometimes the ’ are not copied correctly. Try to replace them all manually and do the process over again.
Does that make sense?

2 Likes

I received error for Invalid: “Font” could not be loaded
image

yeah I had the same and that was due to the wrong copy…

Awesome! thanks!

image

not sure if you notice this, changing the font name to numbers will fix but using text will have error. All 4 fonts I uploaded uses the same URL

Have you checked the ’ in the - font-family : ‘fontname’; - line?

how do I check that?

just replace the apostrophes everywhere in the script, not the copied version

do you mean here?

You don’t have to put url in front of it

Follow the forum post mentioned below those input boxes and replace every apostrophes when you copy the code from their. That should work

oh, I didnt know I need to create a CSS file, thanks man

This solved the issue for me. I replaced the quotes in the css file surrounding the url of the font, then it loaded fine. I used Visual Studio Code to create the css file and it displayed that part of the file with a different color after updating.

I’m having some incredibly persistent issues uploading 4 custom fonts on my site:

I got 1 to work, but I have 3 that are not working.

2 of the 3 that don’t work are fonts that I made in Font Forge and exported as TTF/WOFF/WOFF2.

1 of the 3 that doesn’t work is a font that I downloaded called Tondu-Beta.

The font that does work is called Charter, and I downloaded that one.

According to support “some fonts don’t work on web or Bubble”. So, I want to know if I’m playing with a full deck here, or if I’m just setting myself up for failure later.

So, I went to fontdragr.js.org and confirmed: the fonts work fine, and indeed display on web, so it’s not that.

I also checked the metadata for each font file using Font Forge and confirmed that all of my filenames are accurate to each file’s font family name, and consistent through the CSS file, as well as the file names in the database, and the input for the font name in the settings panel. So, it’s not that either.

I’m having a hard time finding documentation though, and there’s not much support to be gained from support thus far.

Someone recommended uploading the files to the live database, and using those live URLs in the settings panel for custom fonts, but that didn’t resolve it. But thanks for having something worth trying.

I have read every thread I can find, and I have uploaded each of these fonts 5-18 times when you account for multiple formats.

If anyone has any ideas, or if anyone has dealt with other font complications like this, your insight is appreciated!

Alternatively, does anyone know of any documentation or tools to test whether a font is bubble-safe?