Google Font not working on Safari

Hi, I followed this article and installed JetBrains to be used in my website. The font is rendering in Blocs and Google Chrome, but not in Safari (macOS, iOS and iPadOS)

I reviewed our community posts but none of the answers worked for me.

Any ideas ?

Here is the snippet I used to install the font (I tried selecting all styles of family, as well as just the one I want)

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

I think you may have an issue that has been raised by others. Google changed the links a while back, so you need the latest version of Blocs and then add the fonts again, which should fix this. If you self host local fonts on your server you avoid problems like this.

Hello @Flashman

Thank you for your help regarding my font issue.

I added the font manually and problem persists: Google Chrome font renders, safari doesn’t render

Could this css line be related to the issue ?

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

The font I get is ‘Times’

Is the website online so we can take a look? We seem to have a few people lately having issues connecting to Google fonts and I think you would find it much easier if you download the front from Google then host it directly on your server.

1 Like

Just went through all my classes and selected again the font. I had a class where the font was left to the Google version, now that I reselected all fonts it works !

Seems like in Safari the font selected was not winning the css one.

Thanks @Flashman

1 Like

Good to hear you found the solution. We often forget that a single forgotten custom class can change things.

On a side note safari can be very sticky with the cache, so I would always select the option in project settings to cache bust CSS & JS during development, then disable it when the site goes live.