The future of web fonts

Over the last few years, the move from using web-safe fonts within website designs to the now global use of custom fonts has risen at a rapid rate. Designers are now provided with a variety of tools to help them use fonts of their own choice in their websites, rather than being limited to the typical Arial, Verdana, etc. With a variety of tools making it easier than ever to add strong typography to your designs, which method should you choose?

Cufón

Using the Cufón font generator, Cufón runs through your web page – replacing selected tags with a graphic of the text in your chosen font. Fonts render almost exactly the same across all browser. However, as they are generated by JavaScript within an image, the text is disabled from being selected, which may be a usability issue depending on your project.

Font-face

Supported by all major browsers, this is a very modern way to use custom fonts. Fonts must be embedded within the CSS, in a variety of file formats as major browsers understand different formats. Using @font-face renders the font directly in the browser, leaving text selectable. Depending on the user’s browser and operating system the font will render with subtle differences between. It is recommended that only a handful of fonts are embedded on each page, due to multiple files being required per font.

Typekit

Typekit is a great web tool – after embedding two lines of Javascript into your website, you are given access to Typekit’s library of fonts for your designs. As may be expected this is a paid service, but offers access to a wide range of fonts that could not be used with Cufon/Fontface due to licencing issues.

Examples of web fonts in use

Lost World’s FairsKyle Steed
Red Zone PushSasquatch Festival

In conclusion, Cufon is perhaps catered more to using custom fonts in headings and titles, where-as @font-face or TypeKit could be used for body text also. Either method will help you achieve your desired results, so it may come down to personal preference. What is sure however that the web is no longer limited to a handful of fonts, allowing designers to push much more ambitious ideas and designs across.

Share:
Milton Bayer

Milton Bayer

We are Milton Bayer, an award winning, multi-disciplinary, strategic and creative marketing agency.

4 comments

  1. I really like the idea of using Cufón, it doesn’t bother me that text selection isn’t supported to be fair and given that it’s more suitable for header tags than body copy means designers have the opportunity to apply linear gradients, drop shadows and other CSS treatments – This eliminates the need to create numerous header titles in Photoshop. Bonus!

  2. This article is technically misleading, TypeKit uses @font-face to provide their fonts. Other services and providers also use this. And many have far MORE fonts. MyFonts, Fonts.com and WebINK all provide similar services with different payment models.

  3. Personally, I wouldn’t say this article was misleading at all! I think what Mat’s trying to achieve is to weigh up the pros and cons of each solution.

    TypeKit does indeed use @fontface to call and replace fonts, however in retrospect they are actually very different due to the fact that TypeKit is a subscription-only service and you’re limited to using their font library. Whether it uses @fontface to embed fonts is irrelevant, anyone can use it providing they acquire the appropriate license for their fonts.

  4. Pingback: Easywk

Leave a Reply