HTML and CSS Reference
In-Depth Information
↵
embedded-opentype'),
url('../fonts/lato-regular-webfont.woff')
format('woff'),
url('../fonts/lato-regular-webfont.ttf')
format('truetype'),
url('../fonts/
lato-regular-webfont.svg#latoregular') format
↵
('svg');
font-weight: normal;
font-style: normal;
With those three declarations ready and using the correct file references, we can reference
any of those fonts on any element on the page, and the browser will render the font in har-
mony with the original design.
@font-face
Review
So far in this chapter, we've covered a lot of ground in regards to
@font-face
and embed-
ding web fonts. Just to help you grasp all this info, here are the main points to take away:
• Custom web fonts can be included on a web page using any number of web font ser-
vices, including free services such as Google Web Fonts and FontSquirrel.
• If you don't use
@font-face
, you may only use fonts that are available on a user's
operating system.
• The most effective way to ensure cross-browser support for your custom embedded
fonts is to use the
@font-face
syntax that references four different font files.
• After embedding any custom font using
@font-face
, you need to use the font-
family property in your declaration blocks to specify where that font should be used
on the page.
• The name of the font defined in the
font-family
property needs to be the exact
same
font-family
name defined in the
@font-face
declaration.
