HTML and CSS Reference
In-Depth Information
•
Georgia
•
Lucida Sans, Lucida Grande, Lucida
•
Palatino Linotype
•
Tahoma
•
Times New Roman, Times
•
Trebuchet
•
Verdana
Embedding Web Fonts
We also have the ability to upload fonts to a server and include them on a website via the
CSS
@font-face
at-rule. This capability has done wonders for online typography. Now,
more than ever, typography is coming to life online.
Embedding our own web fonts looks a bit like the following CSS. First, we use the
@font-face
at-rule to identify our font's name, via the
font-family
property, as well
as the source of our font (the path to the font file containing our chosen font), via the
src
property. From there we are able to use this font by including its name within any
font-
family
property value. See
Figure 6.5
.
1.
@font-face {
2.
font-family: "Lobster";
3.
src: local("Lobster"), url("lobster.woff") format("woff");
4.
}
5.
body {
6.
font-family: "Lobster", "Comic Sans", cursive;
7.
}
Figure 6.5
By using a web font, we are able to use a typeface that would otherwise be
unavailable
Search WWH ::
Custom Search