Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

Using @font-face to enhance your websites

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Peter Andrease

Peter Andrease

Peter heads up the entire web design team at our agency and enjoys delivering interesting posts that deal with brand new design tips, tricks and tools. As his strengths also lie in client training, Peter has also produced a huge number of tutorials on the subject of design, many of which can be found elsewhere on the site.
-
-

Tags: , , ,

Authors
Categories
Archives
Blogroll