I don’t know if it’s just me, or if something’s happened in the last few months, but I keep seeing this kind of thing everywhere:

Look at those headings – bold text made even bolder by the browser. It’s proper ugly, to the point of illegibility. I only see this in Safari and Firefox – Chrome doesn’t display this behaviour, although arguably it should.

So what’s happening here? Let’s look at what Safari’s web inspector says:

The offending CSS, simplified for clarity, is this:

.block--primary-navigation .block--primary-navigation-title {
  font-family: "Proxima Nova Bold", sans-serif;
  font-weight: 700;
}

Now let’s ignore for now that this should be styling an actual heading and not a div (thank you Tailwind). Otherwise this looks right. And it is. Sort of. The CSS says that the text should be rendered in Proxima Nova Bold. And if that font is not available, the fallback sans-serif should be rendered in bold – which is what the font-weight:700 is there for.

But what Safari is actually doing is taking Proxima Nova Bold and synthesising a bold version of that – leaving us with the ugly double-bolded font. Why? Well it’s not a bug in Safari. The problem is in the @font-face definition which, in summary, has been coded like this:

@font-face {
    font-family: 'Proxima Nova Bold';
    src: url("proximanova-bold.woff2") format("woff2");
    font-weight: normal;
}

This rule implies that Proxima Nova Bold has a font-weight of normal, which is wrong. It’s a bold font, so the @font-face rule should say font-weight:700 (or font-weight:bold) instead. Making that tiny change will stop Safari emboldening the bold fonts:

@font-face {
    font-family: 'Proxima Nova Bold';
    src: url("proximanova-bold.woff2") format("woff2");
    font-weight: 700;
}

Frankly this mistake is pretty basic. It's easy to see why it might happen, but it should be picked up with even the most cursory browser testing. There's really no excuse for this problem to be so prevalent.

A better approach

Better still is to make use of the fact that Proxima Nova is typeface family of multiple weights. In our example, the Acquia website also uses Proxima Nova Regular, so the @font-face rules linking to the different font files should have the same font-family but different weights like this:

@font-face {
    font-family: 'Proxima Nova';
    src: url("proximanova-regular.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url("proximanova-bold.woff2") format("woff2");
    font-weight: 700;
}

And then the styles can be applied accordingly:

.block--primary-navigation {
  font-family: "Proxima Nova", sans-serif;
  font-weight: 400;
}

.block--primary-navigation .block--primary-navigation-title {
  font-weight: 700;
}

Giving you the correctly rendered fonts:

Same typeface, different font weight. The heading now inherits the typeface and renders the unsynthesised bold font as originally designed.