marketing and graphic
design agency

including web fonts on your site

For many years the fonts a web designer could use were limited, but not anymore.

Web designers and coders were often limited to a standard set of fonts, Arial, Helvetica, Verdana for sans serif and Georgia, Times or Palatino for serif faces. This was because these fonts were universally available on almost every computer connected to the internet. Designers knew that if they stuck to these fonts the visual appearance would not differ between different browser and operating systems. Using images with a non standard font rendered as a graphic became a way to resolve the issue of using the vast array of fonts available to a print designer in an online environment.

However using images created its own set of problems. As each piece of text was now an image it had to be loaded by the browser, increasing page load times. Users that have images turned off, would not see the text. Images also fell foul of DDA compliance as they were inaccessible to screen readers. With the drive for better on page SEO and the evolving way in which search engines ranked pages, text images became a hindrance to a good page rank. Content is king when looking for a good SEO ranking and page titles as standard text only help increase your overall page score.

With the advent of new technologies and browser development a whole new world of possibilities for a web designer to use more non traditional fonts within websites has arrived. By using a few simple lines of code it is possible to use a myriad of extra fonts within a website that will be viewable on every browser and operating system. There are many websites now that supply webfonts for use within your website. Many of these sites also allow you to download versions of the font for use in any printed material:

1. Google
www.google.com/webfonts
Probably the largest global reach, Google provide an ever growing list of fonts that can be embedded in a number of ways on your website. All fonts are provided free of charge. The font is delivered directly from Google servers and referenced within your site through CSS and / or javascript. The Google service is very fast and simple to setup with no registration process.

2. Font Squirrel
www.fontsquirrel.com
Font Squirrel provide web fonts via their @font-face kits. These differ slighty from the way in which the font is displayed on your website. Instead of being served from their own servers you generate a series of files that you donwload and include in your website css.

3. Typekit
typekit.com
Typekit was one of the first on the scene as is a very popular font embedding service. It has over 4,000 fonts available. The full library is available through most plans for a single price. The also have a simple free plan for 2 fonts to be used on 1 website. Typekit now also offers Adobe fonts.

4. Webtype
www.webtype.com
Webtype boasts it is all about the quality of its fonts. Many of their fonts were specifically designed from scratch for onscreen reading. The have over 350 fonts available with various levels of pricing depending on how you wish to server your fonts. A free 30 day trial is available.

5. Fontdeck
fontdeck.com
Fontdeck has a catalog which contains thousands of professionally designed fonts, and they are hosted and served from Fontdeck servers to your website. A few lines of CSS code enables the display of the font on your site, with Fontdeck handling all the different browser complications. Each font is individually priced and you pay annually per website.

6. Font Spring
www.fontspring.com
Unlike hosted services, Fontspring provides downloadable sample code and font files that you host from your own server. Fontspring have a large library of over 2,000 fonts. Each font is individually priced with a one time fee to purchase and download each font.

These are just a few of the many website springing up to provide font embedding in your website. Each service has pros and cons, and it is really down to your individual preference and project requirements as to which service you require. Litchfied Morris have used web fonts on a number of their sites recently. For an in depth analysis of the Google web fonts service and one of the possible issue in using this survive, please read this blog entry.