Safari rendering fonts wrong

I’m having this weird problem in Safari.
Some websites display the wrong font.

Edit: I forgot to mention the system/Safari versions:

  • macOS Monterey 12.4
  • Safari 15.5

I tried to clear the cache and history in Safari, but it didn’t work.

I found a Terminal command to clear the font cache:
sudo atsutil databases -remove

I typed the command, entered my password and restarted the Mac. Still no fix.

Here’s an example of the problem. The Alfred app site has the correct font in Firefox:

And here’s what I see in Safari:

Any clues on how to solve this?

Hmm… any chance you could look at the inspector? (cmd+opt+i) With any text element selected, click the computed tab and expand the “Font family” section. It will tell you what font is shown and why.

Does the font eventually appear if you leave it a while? i.e. at least 30 seconds.

Although I’ve not seen the problem on Mac, I’m tracking a problem on iOS Safari where it seems that, for me at least, it takes a long time to access Google Fonts (and other centrally loaded font sites like Typekit). Some sites load initially with a default font, others ‘hang’ until the fonts load. I suspect it’s an Apple security/anti-tracking implementation gone wrong; other browsers on iOS are fine.

It’s says:
"Bitter", serifhtml

I don’t know what to do with it. :thinking:

No. It’s actually the opposite. When the page loads, all text is blank for 1 or 2 seconds.
Then it appears with the wrong font and stays that way.

Any advertising or content blockers installed in Safari? uses fonts hosted on Google. This sounds like Safari is attempting to load the font from Google, but the Google font CDN domains are blocked, so it spends 1-2 seconds trying to load the font and then switches to the fallback, which is the default serif font in this case.

Try disabling content blockers to narrow down which one is causing it. I wonder if Safari’s built-in privacy protection could be causing it, but I’m not seeing any issues here. You could also open up the Web Inspector and see if there’s any errors that say something like “resource was prevented from loading due to a content blocker”.

1 Like

I first disabled the “Prevent cross-site tracking” but the problem persisted.
Then I tried disabling the “Hide IP address from trackers”, reloaded the page and voilá!
The fonts loaded properly!

I then reenable everything and the correct font was preserved.

Thank you so much!