Custom font and a CMS

Question

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)

Answer 1

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.

Answer 2

I would try cufon. The typeface would not be "protected." But it would require quite a bit of technical effort to convert the Cufon generated typeface back to a Truetype or Opentype face.

Answer 3

The method I would recommend is scalable inman flash replacement (sIFR), which you can find information on here: http://www.mikeindustries.com/blog/sifr/

The other technique that is common, but I have never used personally, is php Image replacement. Both require use of scripts, so they won't work with people who use noscript and I know sIFR won't work with Ad Block Plus, but like you said, a large percentage of your market it will work just fine and looks fantastic.

Answer 4

Two options (aside from SIFR and Cufon as others have noted):

Specify a custom font via CSS:

http://www.456bereastreet.com/archive/200710/the_resurrection_of_downloadable_web_fonts/

http://www.richinstyle.com/guides/fontface2.html#src

Create static images:

As you have noted create images for each header using the custom font - this would also present a hurdle to anyone who wants to copy the font. (Of course, they could always trace a font from the graphics containing the font and easily create a TTF from it).

The main strike against is this question is the following:

"I'd like to be really sure nobody can use the font on their own web sites or download a copy"

Really? Without using static images/flash/SIFR/Cufon, a user will need to download a copy of a font to their computer in order to render the font in their web browser. Once you give a copy to the user you can't really expect to control whether they use it on their own web site. Again, it's trivial to copy a font from a static image and create a TTF for the whole world to copy - see sites like http://www.dafont.com/ for examples of famous fonts copied (as an example, the Tranformers font: http://www.dafont.com/search.php?psize=m&q=transformers)

Answer 5

@Font-Face works great for me. There is a generator here where you can upload your font, and then it will provide you with all the formats & code you'll need: http://www.fontsquirrel.com/fontface/generator