Wednesday, October 6, 2010

A common hurdle in web design is in the inclusion of non-web-safe fonts. One solution is to replace the text with a similar web-safe font or use a series of similar-looking fallback fonts. But this a compromise a designer is often not willing to make. Thanks to the Web Open Font Format, it is now possible to embed custom fonts on web pages. When a visitors visits the page the font is downloaded from the specified server so that the page is always displayed with the chosen font.

If you want to use custom fonts on your website, here are 4 services that lets you host your fonts for free.

1. TypeFront serves as bucket to hold your font online and also gives you control over the domains that they are allowed to use. This ensures total control on font usage and prevents unauthorized websites from using your fonts. Simply upload the font, choose the domain and get the @font-face code to include in your website’s stylesheet.

TypeFront also offers an API interface that allows you to integrate the platform into your site, and thereby offer hosted options to your own customers.

2. Typekit is a service that gives you access to an online library of free and commercial fonts that you can embed in your web pages. All Typekit fonts are already hosted online. You just have to choose a font set you wish to use, customize it using the provided online editor to a desired size and weight, and then add the appropriate code in your CSS file.

Typekit offers both free and subscription based plans. The free plan allows you to access over 100+ fonts but is limited to 25,000 pageviews a month, 1 website and only 2 fonts per site. Subscription plans starts at an affordable $25 per year.

3. Kernest is another service that offers you a selection of font faces to choose from an online library. Browse though the library, choose the font you want, enter your website’s domain and get the code to add to your CSS file. Kernest offers a range of selected fonts from Open True Type, GNU Licensed, Creative Commons, Public Domain and commercial licensed. Commercial fonts are available at a single payment of either $9, $10 or $15 depending on the font.

4. Google Font Directory (now Google Web Fonts) is another good place to get stylized web fonts. Although the collection is small, the selection is good and sufficient for your web projects unless you want to build something flamboyant. All fonts in the Google Font directory are available for use on your website under an open source license and are served by robust Google servers.

The fonts are loaded into a page using the Google Font API and can be embedded into a site through the usual @font-face CSS declaration. Additionally, Google offers a WebFont Loader JavaScript library that gives you more control over font loading than the Google Font API provides.