HTML and CSS Reference
In-Depth Information
Lucida Sans, Lucida Grande, Lucida
Palatino Linotype
Times New Roman, Times
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 .
Click here to view code image
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
Search WWH ::

Custom Search