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
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";
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Crossbrowser Downloadable Fonts Example </title>
<style type="text/css">
@font-face {font-family: "Mufferaw";
src: url(MUFFERAW.ttf);}
p { font-family: serif; font-size: 5em;}
p#muff { font-family: "Mufferaw", serif;}
Search WWH ::

Custom Search