David Slack - Web developer
Published on David Slack - Web developer (https://www.davidslack.co.uk)

Home > Font replacement

Font replacement

Dave's picture
Submitted by Dave on Fri, 18/05/2012 - 17:19

In the '90s the only way to add in a cool font to a site was an image or use an eot for Internet Explorer. Then we had iFR to replace headings with a bit of Flash, great for Headings and maybe a few links, but never the whole site.

Over the last few years we have had the @fontface and techiclly, that means we can use any font on any website!

There are a few problems with the way a Mac renders fonts compared to PC and linux and (as usual) there are licencing issues but it looks like things are finally happening for fonts on the web.

This works wonders:

@font-face {

font-family:'AT Rotis Italic Serif';

src: url('/fonts/at-rotis-serif-italic.eot?#iefix') format('embedded-opentype'),

url('/fonts/at-rotis-serif-italic.woff') format('woff'),

url('/fonts/at-rotis-serif-italic.ttf') format('truetype'),

url('/at-rotis-serif-italic.svg#mrjonesbook') format('svg');

}

If you don't want to buy the licence you can use the a few libraries like these which are all great and I've used before:

  • Google Web fonts
  • Fonts.com
  • Font Squirrel

There is a great resource for all the Font replacement techniques here

David Slack - www.davidslack.co.uk - 07833 608098 -me@davidslack.co.uk