Dec. 2, 2011

If you visit my website you will notice everything is in a scrawly hand-written font now. This is a digitized version of my own handwriting. Here is how I produced it:

  • Went to YourFonts and printed the templates twice.
  • Scanned both copies, used the best version of each letter, and tweaked some stuff in an image editor.
  • Uploaded the templates, paid $15, and downloaded the resulting TTF file.
  • Tested it out on my blog (see the cross-browser CSS font-face declaration below).
  • Loaded up the TTF in font forge and tweaked more stuff.

To get it as a web useable font:

  • Use a program called ttf2eot to create a web font file that Internet Explorer likes.
  • Use the following CSS font-face declaration, which works on pretty much all mainstream browsers including Internet Explorer 6.

Font-face declaration:

@font-face {
    font-family: 'MyFont'; /* Use the real name of your actual font */
    src: url('MyFont.eot');
    src: url('MyFont.eot?#iefix') format('embedded-opentype'),
    url('MyFont.ttf') format('truetype');
}

You can do this with basically any TTF font, but watch out for the legal implications of using commercial fonts on the web. It's obviously fine to do it with a font of your own handwriting. There are probably lots of other free fonts you can do it with too, but read the licensing information first.

Here's to more flexible web typography!

Need software development advice? Book a call with me.