ChunkFive Regular

Custom Web Fonts with @font-face, Google Font API and Typekit

2nd November 2011 Update: This blog post refers to the @font-face method being used on this site. This is actually in reference to an old version of the site. Web fonts on this version of the site are served via Google Web Fonts.

A while ago I found myself constantly using the same font for everything. I’m talking body copy, header tags and even logos. My Helvetica (with -1px letter-spacing) obsession was at its peak and I was struggling to mix up my font stacks to add more variation to my designs.

Since then, as advances in web typography have become more readily available, I’ve found it much easier to use type as a key design element in my work, as opposed to being creatively restricted by “web-safe” fonts. The aim of this post is to briefly round up our options (along with my views) when using custom fonts in web design. So let’s take a look!

CSS3 @font-face

With CSS3 standards right around the corner, most browsers supporting CSS3 features and more websites taking advantage of them – @font-face is a custom web font option to consider.

I use the @font-face method for this website and I feel it works well. ChunkFive Regular is an example of a free font that’s license allows us to embed it into our CSS, as I have done with header tags on this site. I would strongly suggest you make sure that by using @font-face you are not breaking the terms of any font you intend on embedding.

Whilst on the subject of @font-face, I must mention the incredibly useful Font Face Kits by Font Squirrel. There are 100s of pre-made @font-face kits that include multiple type formats for all browsers, including Internet Explorer! You can even make your own kits by uploading other fonts with the Font Face Generator but again, check those licenses.

CSS


@font-face 
{
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive-webfont.eot');
	src: local('‚ò?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

h2
{
	font-family: ChunkFiveRegular, Georgia, serif;
}


Pros

  • Endless available fonts (providing you are adhering to the relevant licenses when using them!).
  • Works in all browsers (including iPhone and iPad) when all the right font formats are used.
  • Is not dependant on JavaScript being enabled in the users browser.

Cons

  • It takes slightly longer to implement than Google Font API (more code).
  • Quality of font rendering may differ browser to browser.
  • @font-face is a CSS3 property, so will not pass current W3C CSS 2.1 validation.

Google Font API

Recently, my first stop when working out typography for new projects has been the Google Font API. Although a relatively new service, I find it incredibly simple to use and more importantly painless to set up. The speed of which I can quickly browse the Font Directory, choose a suitable font and have it live on a website is incredible. This is definitely the most hassle free option when using custom web fonts, in my opinion.

The only let down with the Google Font API currently (the service is still in beta) is the fairly small amount of fonts available, although there are variants (bold, italic, etc.) included with some fonts in the directory.

HTML


<head>
        <link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
</head>

CSS


h2 
{ 
        font-family: 'Cantarell', arial, serif; 
}

Pros

  • It’s a free service.
  • Extremely quick set up time (small amount of code).
  • Is not dependant on JavaScript being enabled in the users browser.
  • No need to worry about license legalities.

Cons

  • Small number of fonts to choose from.
  • Quality of font rendering may differ browser to browser.
  • No support for iPhone or iPad.

Typekit

I first heard about Typekit when I received an invitation to try it out a year or so ago. The first thing I noticed is the huge font library – you will definitely find a typeface to fit your designs there. The second thing I discovered was that to use the service to its full extent you have to pay a yearly fee. The “Portfolio” package, which gives you unlimited websites, unlimited fonts per site and access to the full library is by no means expensive at $49.99 per year – but this cost may still be off-putting, especially for designers who are just starting out.

I had used the free trail account to test out Typekit’s functionality, although the limitation of 1 website and 2 fonts is kind of low in my opinion. Coupled with the lack of access to the full font library and the requirement of a Typekit badge in a fixed position on my page, I wasn’t won over enough to upgrade to a paid account.

HTML


<head>
        <script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

CSS


h2 
{
        font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

Pros

  • Large array of available fonts.
  • Good support articles and help section.

Cons

  • Whilst not overly expensive, Typekit is a paid for service (if you want all features).
  • Browsers may render your page content before the custom font, usually meaning a web-safe fallback will be shown for a couple of seconds beforehand.
  • Is dependant on JavaScript being enabled in the users browser.
  • No support for iPhone or iPad.

In conclusion

The custom web font method you use with any given project will be decided by both personal preference and the requirements of each design/build. For instance, if you require your custom font to work with Mobile Safari you would choose @font-face over Google Font API or Typekit. This was the clincher for me personally due to two main reasons – #1 My analytics show a high percentage of visits are from this browser and #2 I like to browse the internet using my iPad. Therefore giving visitors of my site (including myself) the best possible user experience is of high priority to me and using @font-face delivers this.

I hope you found this article interesting. If you have anything to add, whether you agree or disagree with my points – please feel free to leave a comment.

  • http://tomhirst.co.uk Tom

    Oh and yes I am aware the body text of this site is Helvetica – I’ve not fully shaken the addiction yet! ;)

  • http://www.fontslive.com Bill Davis

    Hi Tom – nice overview! Another web font service is our http://www.FontsLive.com – we specialize in offering web fonts that are tuned specifically for on-screen rendering for both text and headline sizes.

    As you and your readers will discover as they explore custom fonts for their websites, not all fonts look good on screen, especially at small sizes. The vast majority of fonts were designed for print, and they fall apart when viewed on screen. This problem is compounded for designers working on a Mac, but whose clients use Windows!

    So if you want to explore a web font for switching out text sizes, pay close attention to the quality!

  • http://www.thedesignloft.co.uk Mark, The Design Loft (web design barnsley)

    Great post Tom, first time I’ve come across your site.

    We’ve been using Cufon for a while now as an alternative to TypeKit – works really nicely but there’s a lack of support for highlighting text – still it does a fantastic job.

    Anyhow, nice site – give us a call if you’re looking for more projects – we’re looking for new design partners locally.

    Best,
    Mark

  • http://tomhirst.co.uk Tom

    Hi Mark, thanks for the kind words. I’ve not come across Cufon before but I will definitely look into it!

    I’ll drop you an email regarding your second point ;)