PSA: always add a generic font-family backup

September 27th, 2017. Tagged: font-face


/* 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;


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!


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 on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov