Search code examples
fontssifrcssfont-face

Custom font and a CMS


I'm building a web site for an artist who has had a custom font made from his handwriting. He'd like to use this font extensively throughout the site - not for all body copy because it'd be difficult to read, but for headings, navigation, callouts, things like that.

I've got the file - it's a TrueType font file.

We're going to be using a PHP-based CMS to build the site.

What is the best way to go about using this custom font for this purpose while still allowing page name, titles, etc. to be edited by the client in the CMS? I'd like to accommodate as many users as possible, but it would be fine if some site visitors saw Arial or Verdana or whatever we choose for the body copy.

Should I give @font-face a whirl? Use PHP to create images on the server? Sifr? This site will likely be around for awhile, so I'd like to be as forward-thinking as possible. At the same time, I'd like to be really sure nobody can use the font on their own web sites or download a copy.

Some background info on his current existing site: Reasonably busy site with about 500 visits (2000 page views) per day.

Browser stats:

IE: 48% (10% of IE users on IE6, 42% on IE7, 48% on IE8)

FF: 32% (38% of those on 3.5.5, 29% on 3.0.15, 11% on 3.5.4, 4% on 2.0.0.20, and 5% on 3.5.2)

Safari: 17% (53% of those on 531.9, 13% on 531.21.10, 7% on 528.16, 5% on 525.22 and 4% on 530.19)

Chrome: 2% (41% of those on 3.0.195.33, 31% on 3.0.195.27, 21% on 3.0.195.32 and 4% on 4.0.223.16)


Solution

  • The easiest solution is to use the @font-face method. If you include the Microsoft only format(.EOT) it will work in ANY browser.

    Check out some of these articles on font replacement.

    http://www.zeldman.com/2009/12/02/bulletproof-font-face/ http://www.smashingmagazine.com/2009/12/01/how-to-support-internet-explorer-and-still-be-cutting-edge/ http://www.jonnyhaynes.com/2009/10/font-face-the-time-is-now/

    You can use this tool from Microsoft to convert your font to a .EOT(The format need for IE)

    http://www.microsoft.com/typography/WEFT.mspx

    The @font-face method doesn't require Javascript or Flash, like the previously mentioned sIFR and Cufon techniques, so is more accessible by all.

    It's totally SEO friendly and scalable.