@font-face : The online services | Web Development

@font-face allows us to include our preferred fonts into a webpage. We are no longer limited to the core web fonts.

Surprisingly, @font-face has been around for a long time and included in Internet Explorer since version 5.5. Only recently has the technology been included in an official CSS standard (CSS3). We now have widespread support in the current generation of browsers... rejoice!

The availability of good quality free or cheap fonts is proving to be a major stumbling block on the path to widespread font-face adoption. The main commercial font foundries, previously geared towards font licensing for print, appear reluctant to embrace this new market with fairer licensing deals. They fear the technology facilitates piracy since the fonts are made available for download. We see similar parallels within the music industry whereby the big music publishers were reluctant to embrace the new online market and are now paying the price.

To help overcome these problems, various online @font-face services are emerging.  Above I mentioned that the technology facilitates piracy since the fonts are made available for download. Whilst this is true, font-face makes it possible for the font to be hosted by a 3rd party. This opens up the possibility for a new wave of subscription based font services... and that is exactly what we are beginning to see.

Font Squirrel

Font squirrel is a FREE service with over 400 fonts. All the fonts featured are freeware and can legally be used commercially.

We found including a font into a webpage a relatively quick and painless process. Font squirrel provide a kit for each font. The kit includes the font in eot (for IE), svg, ttf, and woff formats. Other files include the license (txt), the css (stylesheet.css), and a demo (demo.html).

To use the kit simply unzip the package into a font folder and include the 'stylesheet.css' file in your HTML header. The default 'stylesheet.css' configuration assumes the fonts are located in the same folder so you will need to edit the @font-face 'src' parameter if you wish to move the fonts and the css into separate locations. 

Overall we found the free fonts to be of good quality and would recommend this FREE font service without hesitation. You can find their website at http://www.fontsquirrel.com

Google font directory

Another emerging FREE font service is the 'Google font directory'. The Google service differs from Font Squirrel in that Google host the font and css files. You simply copy and paste the link to the google css into your HTML header. The link contains a dynamic url in the form

"http://fonts.googleapis.com/css?family=FONTNAME:regular,italic&subset=latin"

A benefit of this service includes it's ease of use, since you do not need to download or host any font files under your webspace. You will also save on bandwidth since the fonts are hosted by Google.

Currently, very few fonts are available under the Google Font Directory but hopefully this service will expand in the future.

Another possible downside to this service is the reliance on a 3rd party's hosting to provide something visual like a font face. If the Google service is slow or offline, then the font will not be available and could have a negative impact on your website's visuals.

Google do provide a webfont loader script to help alleviate problems during the font loading process. The concept behind the script is similar to that of preloading images; don't use them until they are fully downloaded.

Font Spring

Font Spring have a good selection of commercial fonts suitable for use on websites with @font-face. Once you have purchased a font with a website liscence you are able to download the necessary css and font files.

A very useful feature includes a @Font-Face Demo so you can pre-test a font in any browser before purchasing.

Overall we found the quality of the fonts excellent but some of the high pricing is really indicative of an industry that is struggling to adapt in this new market.

Conclusions

I do much prefer hosting FREE fonts under the same webspace as the website using them so Font Squirrel is the clear winner here. For commercial fonts however, I would recommend that a 3rd party host the font files to help alleviate potential legal problems but I am yet to find a company that offer such a service.