It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
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.… Read article “CSS Basics: Fallback Font Stacks for More Robust Web Typography”
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.… Read article “Implementing system fonts on Booking.com — A lesson learned”
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 … Read article “`font-display` for the Masses”