{"id":266415,"date":"2018-02-16T08:05:37","date_gmt":"2018-02-16T15:05:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=266415"},"modified":"2020-10-23T16:56:05","modified_gmt":"2020-10-23T23:56:05","slug":"css-basics-fallback-font-stacks-robust-web-typography","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-basics-fallback-font-stacks-robust-web-typography\/","title":{"rendered":"CSS Basics: Fallback Font Stacks for More Robust Web Typography"},"content":{"rendered":"\n
In CSS, you might see a ruleset like this:<\/p>\n\n\n\n
html {\n font-family: Lato, \"Lucida Grande\", Tahoma, Sans-Serif;\n}<\/code><\/pre>\n\n\n\nWhat 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<\/em>. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, what that rule is saying is:<\/p>\n\n\n\n\n\n\n\n- I’d like to use the Lato font here, please.<\/li>
- If you don’t have that, try “Lucida Grande” next.<\/li>
- If you don’t have that, try Tahoma.<\/li>
- All else fails, use whatever you’ve got for the generic keyword
Sans-Serif<\/code><\/li><\/ol>\n\n\n\nSo in what situation would a browser not have the font you’re asking for? That’s pretty common. There are only a handful of fonts that are considered “web safe”\u2014meaning that it’s likely most computers visiting your site have that font installed and so the browser can use it. Think: Arial, Times New Roman, Courier, Georgia, Verdana, and a handful of others<\/a>.<\/p>\n\n\n\nBut most websites, these days, use custom web fonts. They load up a font as a resource (just as a website loads CSS itself as a resource<\/a>, or an image, or JavaScript), then that font is available to use. The widely popular Google Fonts<\/a> makes that pretty clear:<\/p>\n\n\n\n