Custom Fonts not showing up in Safari and other browsers

Questions
1

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

2

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');
}
2 Likes
3

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

Thanks!

4

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

5

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.10
Screenshot 2020-06-05 at 18.17.10910×422 34 KB

6

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.

1 Like
7

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.58
Screenshot 2020-06-05 at 18.27.58852×432 19.1 KB

Thank you so much for your help!

8

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

9

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

10

“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.

11

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:

12

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 :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like
13

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.

14

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

15

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