Category: technology

I work in technology for a living, as a product manager in BCG’s IT Knowledge group. I’m pretty keen on technology generally. Below are posts about websites I’ve worked on, fonts I’ve designed, and JavaScript I’ve written.

How to generate a webkit font

In order to put a font on a webpage, I use a webkit font generator called fontsquirrel.com to turn TrueType fonts into the types that the web can understand: ttf, woff, eot, svg.

This is a webkit font in action

Steps to generate a webkit font

  1. I create a TrueType font using TypeTool 3 (with a little help from my CINTIQ pen and Adobe Illustrator). I like to make my own fonts from scratch. If you prefer to pick a font lovingly designed by a professional designer, TypeKit.com is very easy to use.
  2. I submit this file to fontsquirrel.com‘s web font generator. It generates a zip file with ttf, woff, eot, svg, a CSS file, and a demo file. In this zip file is a snippet of code that looks like this:
  3. @font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
  4. I copy the font files (the contents of the zip) to my web server.
  5. I copy the block of code above to my CSS file and modify it accordingly to point to where the fonts reside on my web server.
  6. I may have to adjust file permissions to make sure everything works.
  7. I then can use the font by adding the “font-family” property anywhere in my stylesheet.
  8. You may also choose from the free fonts on fontsquirrel.com. Warning: don’t use @font-face too many times, it will slow down your website!

More posts in technology