Daniel Reed
.NET, SharePoint and Graphic Design
Posted by mirata on May 2, 2011 in Optimisation, Web Design | No Comments

For a number of projects recently, I have had to use custom fonts sites – both SharePoint and otherwise. This is always a tricky area for a number of reasons:

  • Browsers all have their own text-rendering nuances
  • Not all browsers accept the same custom font formats (though this is improving as older browsers phase out)
  • Custom fonts add page weight.

The first 2 points can be more or less worked around by supplying different font formats such as TTF, WOFF and OET files. The main problem is the page weight. Fonts are cacheable items because they remain static, but one custom font could add around 50kb to your site.

And sometimes, I am willing to make this compromise. After all, images can easily be this size. And the font style can have a massive impact on your site – it distinguishes your brand from the billions of other sites out there. Oh yeah and looks cool. We are all very familiar with the standard fonts that people use on their sites because we actually have a rather limited collection.

There are quite a number of useful tools out there for font-face generation such as http://www.fontsquirrel.com/fontface/generator. But just recently I came across Google Web Fonts.

Google's font selection

This lets you quickly preview and use various fonts under open source, hosted by Google. This means that:

  1. Google has done all the hard work for you
  2. You can preview all the fonts and fine one you like very easily
  3. Google is acting as a CDN – so you have a fast delivery network that users leverage, and you take the effort off your servers

It also has a nice feature of letting you play around with the CSS in realtime to get a hands-on feel for your the font will look in your site.

Interactive Preview

Now there is not a huge collection of font here, and this is probably due to mostly licensing issues. So if you want something that’s not in this collection, you may have to still create your own fonts, and work through the licensing and creation issues. But this is a great start and gets a lot of designers away from the traditional fonts we are sick of seeing.

Leave a comment

Spam Protection by WP-SpamFree