Web Fonts

Web fonts can be installed on your web site’s server and served to your users/viewers through your CSS. This works in all browsers, but different browsers require different formats, so you need to store all the file types on your server. Once you do that, you can set up the CSS:

/* Set up the Font Family */
@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compact Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

Then just use the Font Family wherever you would like by putting it at the front of the font-stack for any object you want with that font.

/* Use the font in your styles */
h1 { font-family: 'MyFontFamily', Arial, Helvetica, san-serif; } 


Many foundries are selling their fonts with the web files now for an extra charge. There are also some good free web fonts available at fontsquirrel.com. You will need to have all those web files on your server for this to work. webfont.eot (.woff, etc.)

The CSS code I used above comes from FontSpring. Be sure to read the post I just linked and this one also, if you want to understand more how it works. As of today (May 1, 2011) this appears to be regarded as the best code for using @font-face. It may change in the future, as browsers continue to update and change.

There are two important considerations when using @font-face. One, make sure your fall-back fonts look OK in case the browser has any trouble loading your fonts. You may need to search for a web safe font that is more similar to your chosen font, so the layout doesn’t break.

And two, sometimes there is a lag in the fonts getting loaded, and there can be what is called “FOUT” (flash of unstyled text). I will try to discuss how to handle this issue in the future, but won’t be covering that today. If you test your code on your server (it won’t happen as much when you are testing locally) and it is a problem, do a search on FOUT and you will find some solutions.

Despite these considerations, I love using web fonts. You can get the character and style you want in your website without the extra images (or using other convoluted techniques) and can make things faster.

Leave a Reply

Your email address will not be published. Required fields are marked *