Getting Your Page or Template Ready

We started by adding a div named "logofont" for the site/company name and a second element named "motto".  Collectively, these two bits of text form the new logo as primary text (with the company name) and a sub-line (for the motto).

Choosing Fonts, Formats and Uploading

To use the @font-face CSS3 property, we need to have the fonts available for use on our web site. Our first step was to create a new directory named 'fonts' on the web site and upload the fonts files to be used. For this example, I'll use the free and public domain font Xenophone.

This is CSS 3 Text in Action!

Xenophone is an ".ttf" or "TrueType" format font.  Other font formats include .otf (OpenType) and .eot (Embedded Open Type).  Unfortunately, between different browsers font format compatibility can be significant issue.  For example, Internet Explorer is only currently compatible with the .eot format.

The Solution: Convert your TrueType or OpenType font into multiple formats using this handy generator.  In my experience, about half of the fonts I've tested look fine when converted to other formats, while the rest have a little pixelation or 'jaggies' on the text-edges.

Working with the @font-face CSS3 Style

After getting the fonts ready, we started preparing our CSS styles.  First we need to actually reference the font in question, so it is available to style other CSS elements:

@font-face {
font-family: "xenophone";
src: url(/fonts/xenophone.ttf) format("truetype");
}

The code above is pretty standard but can be improved. First, it's possible that the site visitor already has the font in question on their machine.  By adding a "local" property, we may be able to speed up page load.

@font-face {
font-family: "xenophone";
src: local("xenophone"), url(/fonts/xenophone.ttf) format("truetype"); /* non-IE */  
}

Next we dealt with the elephant in the room, Internet Explorer.  IE currently only plays well with the @font-face property for "Embedded Open Type" fonts and other browsers (Mozilla, Safari, et al.) may not render an .eot font very well at all.

Luckily, we were able to add a line that only IE will use and other browsers will ignore (tricky, right?).  Be sure to specify the .eot font first.

@font-face {
font-family: "xenophone";
src: url('/fonts/xenophone-webfont.eot'); /* IE */ 
src: local("xenophone"), url(/fonts/xenophone.ttf) format("truetype"); /* non-IE */  

}

Last Step: Styling the Logo Text and Motto

Great!  At this point we had a truly cross-browser compatible font to use.  Our last step was to actually use that font in our CSS to style the text used for our new logo and motto on the cartanova.ca web site.

The logo text loads the Medio font and clears to make room for the motto:

#logofont {
   font-family: xenophone, Georgia, sans-serif;
   font-size: 3.2em;
   float: right;
   clear: both; 
 }

For the motto text, we decided to have it look a little different, and just used a standard font style:

#mottofont {
	font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
	 float: right;
	 color:#FFFFFF;
	font-size:1.1em;
	text-transform:uppercase;
	padding: 0;
	margin-top: -10px;
 }

..and done.  We now have a CSS3 @font-face logo!  We hope this article has been useful and we'd love to see what you do with @font-face - leave us a note in the comments!

Notes - Things to Watch Out For

Not all fonts will convert well, using different fonts with the Onlne Converter tool may take some trial and error.

Be careful when testing your code locally (WAMP, MAMP, XAMPP, etc.)  You may need to temporarily uninstall the fonts on your machine to make sure they are actually loading correctly from the web site.  It certain cases, only a live test may work (I'm not sure why).

This information in this article comes from multiple sources.  For more information, I've found no better reference to CSS @font-face usage than this article at randsco.com