@font-face

By CRAIG KUNCE

When I designed the web site for my children's book series, Edrick the Inventor, I wanted to use the same typeface (font) that I custom designed for use in the printed books. I found this cool at-rule on the w3.org @font-face web site that allowed me to do it.

Step-by-Step

1. Save the font file (.ttf, otf, etc.) to a folder in your web site
2. Open your main css
3. Create a new css at-rule in your web site's main css file. Here, I show it written directly in the main css file. I put mine below the body css rule.
   
   
   
   
4. Next, call for the new typeface in your other css rules anywhere on your page. I used the typeface for my web page's headlines.
   
   
   
   
5. Save all your files (don't forget the css file) and upload.
6. Go check it out… pretty cool.

FYI: I've noticed this struggles to work in some older IE browsers (but then, what doesn't) : (

NFL Font-Face Sample

In July, 2011 I noticed the NFL's web site switched to a unique typeface for their headlines. I checked out their CSS and sure enough they were using the cool @font-face css rule. It really helps brand their site with "football" themed headlines.

Here is the @font-face css telling the browser where to find the font on the NFL's web site.

Then, in the CSS, the font is assigned to style type in a div