A reader of Head First HTML and CSS wrote in today to ask about web fonts. Web fonts is a fairly new feature supported by browsers that allows you to include non-standard fonts in your web page. It works like this: you specify the font you want in your CSS using the @font-face rule, and when the user’s browser downloads the CSS for your page, the browser sees the @font-face rule and downloads the font to use in the page.

In our book, we show using the @font-face rule to specify URLs to two font files for the font, a WOFF file and a TTF file, both hosted on the wickedlysmart.com site. This CSS works great in Safari and Chrome, but no longer works in Firefox. After digging a little deeper, it looks like Firefox now has a “same domain” restriction; that is, the font file must be hosted at the same domain as the web page in which the font is loaded.

To fix this issue, download the font files to your server and place them in the same folder as your CSS file. Then change the CSS in the example to:

@font-face {
font-family: "Emblema One";
src: url("EmblemaOne-Regular.woff"),
url("EmblemaOne-Regular.ttf");
}


IE may have also have this “same domain” restriction, I’m not sure, but IE is a lot pickier about how you specify web fonts than the other browsers. If you switch to using local web font files and your CSS is working in Safari, Chrome and Firefox, but not IE, then try adding the format option on the end, like this:

@font-face {
font-family: "Emblema One";
src: url("EmblemaOne-Regular.woff") format("woff"),
url("EmblemaOne-Regular.ttf") format("truetype");
}


Make sure you’re using quotes around the font family name (because it has a space in it) in both in the @font-face rule as well as in any subsequent rules where you use font-family property with this font.

Another issue to be aware of: if you are hosting your own fonts, you might need to check with your hosting service to make sure the files are being served with the correct MIME type.

A final option is to try using the web font directly from a hosting service like Google. Here is a link to instructions using the Emblema One font by linking to Google: http://www.google.com/fonts#UsePlace:use/Collection:Emblema+One. What you do is link to the font at Google instead of on your own server (or ours) using a <link> tag (just like you’re linking to external CSS), and then use the font just like we’re doing in the chapter, by using the name “Emblema One”. It’s super easy!

Hopefully you’ll be able to get your web fonts to work with this information. Let me know how it goes by posting comments below.