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.
- Save the font file (.ttf, otf, etc.) to a folder in your web site
- Open your main css
- 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.
- 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.
- Save all your files (don't forget the css file) and upload.
- 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