How to fix wrong font weights in Safari

With many browsers come various problems that occur in one browser but not in the other ones and vice versa. One of them is how fonts are displayed.

The problem

Recently I stumbled upon a problem: a font that was used on a website wasn’t displayed correctly in Safari. In that particular case, the font was Futura PT Condensed Extra Bold, and it was self-hosted. The issue occurred in Safari for macOS and iOS. The font was used for headlines with a font weight of 700 and was supposed to look thick. The font looked fine in Chrome and Firefox, but in Safari it looked way too thick and ugly.

Headline set in Futura PT Condensed Extra Bold that looks way too thick and ugly in Safari.
Ugly Futura PT Condensed Extra Bold
Headline set in Futura PT Condensed Extra Bold that looks the way it should look in Safari.
Beautiful Futura PT Condensed Extra Bold

The solution

After researching on the internet, I only found a handful of resources that helped me solve the problem. The first one was a post on Stack Overflow. The second one was a post on Reddit. The third one was a post by Anders Norén that was published only two months ago.

Using the font-synthesis property and setting it to none was the magic solution. So I added the line font-synthesis: none; to my <body> tag in the CSS file, and thought the problem was solved. The font didn’t look thick and ugly anymore in Safari and looked slightly thinner in Chrome and Firefox. But that was something I could live with.

Unfortunately, tags like <strong>, <em> and <small> weren’t defined in the CSS file and all styles that come with those tags as standard were removed. To fix that, I had to define all HTML tags that weren’t defined in the CSS file so that everything looked good again.

Summary

If you stumble upon the problem that a font you use on a website is displayed way too thick and ugly in Safari, adding the line font-synthesis: none; to your <body> tag in the CSS file can really save your day. But make sure that all tags (e.g., <strong>, <em>, <small>) you use on your website are defined in the CSS file. Otherwise, their styles that come as standard will be removed.