Fonts - HTML and CSS: The Complete Reference

HTML and CSS Reference

In-Depth Information

Now any place you want to use the font, just specify the newly embedded one as the

first font in your font list with backup fonts afterward:

p#mufferaw { font-family: "Mufferaw", serif;}

Of course as with anything, other browsers have slightly different ways of embedding

fonts.

Standard Downloadable Fonts

Other browsers like Firefox, Safari, and Opera that support downloadable fonts do not use

Microsoft's EOT format but instead support TrueType Files. Fortunately, other than font file

format, the syntax is about the same. Here we pull in a font:

@font-face {font-family: "Mufferaw";

src: url(MUFFERAW.ttf);}

and now we set it just as before:

p#mufferaw { font-family: "Mufferaw", serif;}

The important question remains: Can we use the two forms together?

Cross-Browser Downloadable Fonts

There are number of ways you might support downloadable fonts in a browser. Some Web

designers might suggest simply embedding the two versions of the fonts and then using the

simple comma fallback concept. For example,

@font-face {font-family: "Mufferaw";

src: url(MUFFERAW.ttf);}

@font-face {font-family:"Mufferaw EOT";

font-style:normal;

font-weight:normal;

src: url(mufferaw.eot);}

p#muff { font-family: "Mufferwa EOT", "Mufferaw", serif;}

Interestingly, Internet Explorer 8 does not like this concept. Currently, however, it is easy

enough to work around this using Explorer's conditional comments; just use the same name

and override the downloadable font format or not, depending on whether Explorer is used.

<!DOCTYPE html>

<html>

<head>

<title> Crossbrowser Downloadable Fonts Example </title>

@font-face {font-family: "Mufferaw";

src: url(MUFFERAW.ttf);}

p { font-family: serif; font-size: 5em;}

p#muff { font-family: "Mufferaw", serif;}

</style>

Search WWH ::

Custom Search

Home