HTML and CSS Reference
In-Depth Information
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-
cognizes.Justincasenoneofthefontsaredefined,thelastoptionwe'veincludedisageneric
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
Using
@font-face
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
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:
@font-face {
font-family: Lato;
src: url('lato-regular-webfont.eot');
src: url('lato-regular-webfont.eot?#iefix') format
↵
('embedded-opentype'),
url('lato-regular-webfont.woff') format('woff'),
url('lato-regular-webfont.ttf') format('truetype'),
url('lato-regular-webfont.svg#latoregular')
format('svg');
font-weight: normal;
font-style: normal;
}