Adapting your website to use @font-face

Gone are the days when we were forced to use a limited selection of browser compatible fonts. CSS3 brings enormous improvements and flexibility where choice of typeface is concerned. Read on to find out how implementing a wide variety of quality type into your web designs can bean  easy and effective approach to making your site more enjoyable to read. A great primer to learning the basics can be found here: http://www.font-face.com/

@font-face is possibly one of the best recent enhancements to CSS and one which is routinely overlooked.  To start off, you’ll need a web compatible font. An excellent resource for converting mostly any font to a font which can be used on the web is Font Squirrel ‘s @font-face generator ( http://www.fontsquirrel.com/fontface/generator). So long as the typeface you choose to convert isn’t restricted by licensing (Sorry, no Helvetica), the generator will convert a true type font from your computer to a web-compatible version and allow you to download that generated webkit font for use on your website.

If you’d prefer a pre-generated font which is ready for the web without need for any conversion, the following sites offer premium fonts that are ready for download and direct implementation into your site:

Font Squirrel - http://www.fontsquirrel.com/fontface : Hundreds of free fonts in almost every category you can think of.  Just download a font, upload to your FTP and reference it in your style sheets (visit http://www.font-face.com for complete instructions on how to use @font-face).

Fonts 2 u - http://www.fonts2u.com/ : Tens of thousands of fonts and most of them are offered in @font-face for direct web implementation.

Another method of using web-ready fonts is to subscribe to a service which hosts a wide variety of them. The font’s are hosted and managed separately from your web storage and are easily managed via a font control panel. While some of these services charge a subscription fee, almost all of them offer a stater package which is free to use. A few of the more popular services are:

http://www.google.com/webfonts - Yes Google apparently also does webfonts. It’s a great (and free) service for easily implementing great type into your web designs.

https://typekit.com - One of the most popular @font-face services offers paid subscriptions as well as a free option.
Useful links for implementing @font-face into your designs and sources mentioned in this article:

http://www.font-face.com/ : Learn the basics of @font-face and incorporating webkit fonts.

http://www.myfonts.com/ : A variety of premium webfonts for both pay and free.

http://www.fontsquirrel.com/fontface : Lots of free, premium fonts ready for the web.

http://www.fonts2u.com/ : Tens of thousands of fonts and most of them are offered in @font-face for direct web implementation.

http://www.google.com/webfonts : Googles webfont service makes installing and using new fonts easy.

https://typekit.com : Another service which hosts fonts and makes installing and using new fonts easy via a control panel.

http://www.fontsquirrel.com/fontface/generator : Upload fonts from your computer and have this generator create web compatible versions in seconds. Done entirely from the web without a need to download additional software.