In CSS, you might see a ruleset like this:
html {
font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}What the heck, right? Why don't I just tell it what font I want to use and that's that? The whole idea here is fallbacks. (more…)
Stuart Frisby documents that you shouldn't use the font shorthand when using a System Font Stack:
...don't use -apple-system at the head of a shorthand font declaration, and test thoroughly, especially when playing around with proprietary stuff like system font declarations. If it looks like a vendor prefix and smells like a vendor prefix, chances are at least one browser is going to treat it like a vendor prefix.
Use font-family instead.
Updated on January 12, 2017: Proper support checks are now part of the article body. Added information about the block value. Minor tweaks and copy edits. Enjoy!
If you're a regular reader here at CSS-Tricks, chances are good you know a bit about web fonts. You may even know a few useful tricks to control how fonts load, but have you used the CSS font-display property?
The font-display property in CSS is available in Chrome, and emerging in Firefox and Safari (but you might want to check browser support for yourself, since things change all the time). It's a simpler way of achieving what the Font Loading API is capable of, as well as third party scripts such as Bram Stein's Font Face Observer.