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
serifs, which are small lines that trail from the extremities of the font .
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
loaded. To do this, we have to include the font using @font-face . You'll recall, in Chapter
2 , we briefly learned about the @media at-rule. @font-face is another type of at-rule. It
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;
}
 
Search WWH ::




Custom Search