PSA: always add a generic font-family backup

September 27th, 2017. Tagged: font-face

TL;DR:

/* WRONG */
.huh {
  font-family: Helvetica Neue, Helvetica, Arial;
}
/* OK */
.huh {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

Exhibit 1: Bing search

Yeah, I use Bing search, shut up!

Check this out, the ugly Times New Roman font to the right where it says Rewards:

Definitely not what the designers intended.

The problem there is that the CSS is just font-family: Arial;. No generic fallback. Using font-family: Arial, sans-serif; would look so much better.

On the surface there's nothing wrong because Arial is a "web-safe" font. Except for some reason a bunch of the "safe" fonts are disabled on my machine. Don't know why. Some software update of sorts.

No Arial, no Verdana, etc. It happens.

And when there's no "sans-serif" generic backup, the browser chooses the default Times New Roman. Ouch.

Exhibit 2: misspelled or missing font

Check this page out. It has a font for the body and some overwrites:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
span {
  font-family: Arial, sans-serif;
}
p {
  font-family: Ariel;
}
div {
  font-family: Ariel, sans-serif;
}

Result:

The span is fine. The p is wrong because Ariel is misspelled. The div is also fine, because even though misspelled, there's a generic font family as a backup.

The problem with the misspelled font is that the browser drops the value (Ariel) but not the whole declaration (font-family: Ariel). So the body style is still overwritten but with invalid value. As if you did: font-family: initial;.

You may think misspelling is too contrived. But hey, it happens. Happened to me. Also happens when you think a fancy @font-face should be available, but for some reason it didn't load.

Exhibit 2: HelveticaNeue

"Helvetica Neue" spelled without a space like "HelveticaNeue" is valid in Chrome. But you get Times in Firefox. Ugh!

Conclusion

The only web-safe fonts are the generic ones, namely: serif, sans-serif, cursive, fantasy, monospace. Be safe and always have one of those. Bye!

Tell your friends about this post: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...

Meanwhile, hit me up on twitter @stoyanstefanov