If you load up some stylin’ web fonts on your server, call them in your style sheet inside of a media statement, and then view them in Chrome, Safari, or IE9, you’ll be pleased with the results. Instead of the usual system fonts, your page with be provided with the stunning new fonts you called. At present try it in Firefox.
The issue is with the use of equally the media declaration and the web fonts. Which media values cause a problem? Looks similar to all of them (all, screen, print, etc.). Eliminate the media declaration and your web pages will then show the fonts your designer specified:
@media all { /* Remove this media declaration and start brace */
@font-face {
font-family:”Frutiger”;
src:url(“/fonts/frutiger.eot?iefix”) format(“eot”);
}
@font-face {
font-family:”Frutiger”;
src:url(“/fonts/frutiger.eot?iefix”);
src:url(“/fonts/frutiger.woff”) format(“woff”),
url(“/fonts/frutiger.ttf”) format(“truetype”),
url(“/fonts/frutiger.svg#frutiger”) format(“svg”);
}
} /* Remove this end brace */
If you need to keep your media declaration in your style sheet, then I propose that you just move all of your font-face calls to a new style sheet.


(4.00 out of 5)