HTML and CSS Reference
In-Depth Information
F
IGURE
6-1 Media queries in action
Web Fonts
An exciting change that some incorrectly think was introduced by CSS3 is the inclusion of
Web fonts. In reality, downloadable fonts using CSS and even HTML have been available in
browsers since the 4.x generation, though with the demise of Netscape, only Internet
Explorer continued to support them until their later reintroduction in more modern
browsers. Regardless of their origin, the syntax is fairly consistent. An “at” (@) rule is used
to associate a font name to be used in a style sheet with some downloadable font. A
font-
family
property is used within the rule to name the font, and an
src
is associated with an
external font name:
@font-face {font-family:
fontname
; src: url(
fontfile
);}
Later, the font can be used as a name within properties like
font-family
and
font
.
Make sure to specify other font names as a fallback in case downloadable font technology is
not supported or the font fails to load for some reason. As an example:
@font-face {font-family: "handwriting"; src: url(handwriting.ttf);}
body {font-family: "handwriting", cursive; font-size: 5em;}
