A Modwest pro tip: Explore custom fonts for your website

Tweet

Not too long ago, web designers were stuck using just a small selection of fonts for personalizing their websites.  To ensure a website would look the same on a variety of browsers, designers had to choose from a handful of web-safe fonts. Until about 2010, if designers wanted to present text in a non-standard font, they had to "pick their poison": Create a static image representing the text, use a somewhat limited technique to replace text with a small flash image, or use custom font capabilities that were only supported by some browsers, leaving the rest to see default fonts. Each of these methods sacrificed some combination of development time, presentation quality, search-engine readability, and browser compatibility. Yet, it was often worth the cost for designers to present headings and navigation menus in a personalized font that reinforced their sites' identities.

Happily, in 2010, the major browsers finally united on a single method to support custom font faces via CSS. This new method, @font-face, allows your site to use any TrueType font you have put on the server and assign it to styles in your website. With this method, all you have to do is convert that font to an EOT format using a tool such as this one: http://www.kirsle.net/wizards/ttf2eot.cgi. Then, upload it to the server and call it via CSS. (Here are some in-depth instructions: http://boldperspective.com/2011/how-to-use-css-font-face/)

The Catch
Now, I wish I could end this blog right here. Unfortunately, there is a significant catch with using custom fonts: licensing. It's likely that most of the fonts on your computer are not licensed for you to legally re-purpose on your website. 

Thankfully, a number of web services have launched to give you a wide selection of free fonts to freely incorporate on your websites. Here are just a few to get you started:

• Google Font API - http://www.google.com/webfonts
  In 2010, Google launched the Google Web Fonts, a wide collection of free-to-use fonts, plus a simple javascript snippet that makes it easy to install. The script handles the font linking and CSS setup, and also performs some nice tasks, like optimizing your font for older browsers that support custom fonts -- even Internet Explorer 6. Modwest.com makes some use of the Google Font API (see http://www.modwest.com/webhosting/allfeatures.phtml)


• Typekit - https://typekit.com/
  Similar to Google Web Fonts, Typekit offers a script to make installation easier, but its selection is much more extensive. In addition, websites serving more that 25,000 page views per month will have to spring for one of Typekit's fee-based plans, starting at $25/year.  Now, if your site is serving that much traffic and image is important, this annual fee is really affordable.


• Other Custom Font Providers:
  Font Spring (http://fontspring.com/), Typefront (http://typefront.com/), Font Squirrel (http://www.fontsquirrel.com/)

Hopefully this kick-starts your journey beyond the old, miniscule collection of standard web fonts. If you have any other recommendations, tips, or services, please comment!