Custom Fonts not showing up in Safari and other browsers

gainly.world · 2020-06-03T13:35:40.941Z

Hi all,

I uploaded custom fonts which Bubble didn’t provide (Monty font).

They work great in Editor and in Google Chrome, but when viewing on Safari (web or iPhone) they don’t show up.

Is there a way to get custom fonts to work on all browsers?

Thanks so much!
Tom

edward.w.douglas · 2020-06-03T16:39:32.893Z

Hi! Safari and other browsers are not very good reading TTF and EOT fonts. Do you have all format uploaded?

This should work if you have all formats:

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
   url('myfont-webfont.woff') format('woff'), 
   url('myfont-webfont.ttf')  format('truetype'),
   url('myfont-webfont.svg#svgFontName') format('svg');
}

gainly.world · 2020-06-05T16:25:02.344Z

Thanks Edward!

So I added the Monty fonts just in CSS, which makes sense why they don’t work on other browsers.

How exactly can I add them again so they work in Safari using your answer above? Sorry I’m still relatively new to Bubble! Any guidance would be most appreciated

Thanks!

edward.w.douglas · 2020-06-05T17:16:05.291Z

Hi! Do you have the fonts downloaded as a file? Or are you using it via public CDN?

gainly.world · 2020-06-05T17:19:04.753Z

Hi!

So i originally downloaded the fonts into otf and ttf, then transferred them into a CSS file converter online. This is what the CSS Bold Font file I uploaded looks like.

Screenshot 2020-06-05 at 18.17.10910×422 34 KB

edward.w.douglas · 2020-06-05T17:24:20.365Z

I see. The fonts are not hosted in your Bubble app.

Here is what you need to do:

https://manual.bubble.io/building-a-user-interface/custom-fonts#:~:text=The%20Custom%20Font%20section%20for,do%20not%20need%20them%20anymore.

gainly.world · 2020-06-05T17:30:49.700Z

Thanks Edward.

Ah ok so I also did take the CSS files and upload them all using the text editor feature, then uploaded them 1 by 1 into Bubble (attached a screengrab). So they are in my Bubble App, work fine in Chrome, just not Safari.

So would following the steps in the manual still fix it so they would show on Safari?

Screenshot 2020-06-05 at 18.27.58852×432 19.1 KB

Thank you so much for your help!

gainly.world · 2020-06-05T18:18:57.591Z

Just tried following the Bubble Manual link you posted and still no luck when viewing in Safari

jack4 · 2020-08-13T22:31:01.337Z

@gainly.world

any luck here? I’m having the same problem with safari and mobile more generally. Nexa Bold is not showing up at all and is being replaced by another font.

I attempted to upload the multiple font types to the file uploader and then use that link to host the font in my bubble app. Below is a screenshot of my CSS file:

Screen Shot 2020-08-13 at 6.27.02 PM1272×258 109 KB

Maybe Nexa Bold is just too uncommon of a font? Any advice by the community would be appreciated. You can test it here at https://www.bookwithrove.com. It works on google chrome (web) but almost no where else.

Jack

zach8 · 2022-01-12T07:24:11.262Z

“Too uncommon” shouldn’t be a factor if the fonts are uploaded and hosted on the same server that hosts all the other assets for the site.

I also uploaded custom fonts following the Bubble instructions, and I am also having issues on iPhone using both Chrome and Safari browser.

I have 5 custom fonts, 4 of which are ttf and one of which is otf. I have font forge, so I can probably convert to whatever format might solve this if anyone has any suggestions?

Custom fonts are essential for my web app. Part of my company’s brand identity is 2 fonts that we designed. Our fonts function as a brand mark, and the design can’t be complete without them.

zach8 · 2022-01-12T07:31:54.170Z

Did you upload the WOFF and WOFF2 files as well as the TTF and OTF files?

I just found this link, that has some helpful insight on font file formats. Haven’t tried it yet, but will reply with an update when I get to it:

CSS-Tricks – 23 Feb 18

Understanding Web Fonts and Getting the Most Out of Them | CSS-Tricks

Using custom fonts is getting increasingly easier. We’ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.

josh24 · 2022-03-23T01:53:53.399Z

I had this exact issue having followed another (much older) forum post which went something like this. Here’s my solution for anyone who drops on this page

@font-face {
  font-family: "MyFont";
  src: URL("https://sample.com/myfont.otf");
}

I didn’t have the same font in older font file types, I also discovered it generally wasn’t required for modern browsers, but what you did need to do for Safari was to specify what type of font file it is. I don’t think font-weight etc are needed. The format parameter is key.

So it goes something like this:

@font-face {
  font-family: "MyFont";
  src: url("https://sample.com/myfont.otf")
  format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Anyway, here’s a link to my CSS file ready for you to edit and upload

Josh @ Support Dept
Helping no-code founders get unstuck fast save hours, & ship faster with an expert on-demand

zach8 · 2022-04-13T17:47:43.004Z

For me it wound up being the CSS file formats. Something was slightly off with the formatting in mine because I was doing them in a text editor, saving as text, and then changing the extension on the file afterwards.

Once I did them in a proper CSS editor it was resolved.

It got tricky because there wasn’t an error message on my end. The interface didn’t give any indication that the CSS files weren’t functioning.

saviorabrams · 2023-01-05T22:33:32.330Z

How were you able to solve the Safari issue? Currently stuck on making this work.

zach8 · 2023-01-25T18:58:21.533Z

It’s explained in the previous posts. I did not discover any browser-specific issues.