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!
