HTML and CSS Reference
Note: Commonly Installed Fonts
If you would like to know the fonts that are commonly installed on most com-
puters, see http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html .
When separating the font names via commas in the font-family declaration, we're defining
what's called a font stack . The browser will read this and then display the first font that it re-
font family. This tells the browser to display the text using the default sans-serif font that's
installed onthe user'ssystem. Other generic fontfamilies include serif, monospace, andcurs-
ive. We've chosen sans-serif because the Lato font is a sans-serif font—that is, it doesn't have
While it 's good to know how to stack fonts to ensure there's a back-up plan for when the
original font isn't available, we want to do whatever we can to make sure the primary font is
loaded. To do this, we have to include the font using @font-face . You'll recall, in Chapter
enables us to embed custom fonts in our stylesheet and then use them by name, employing
the font-family property.
Here's how we set the @font-face rule to include the Lato font on RecipeFinder:
src: url('lato-regular-webfont.eot?#iefix') format