Embedding fonts in web pages

I am pleased to report that embedding fonts in web pages is now possible.  We are no longer limited to the 13 or so web-safe fonts trading style for seo-friendly pages!

Step by step

I followed NiceWebType.com's article, filled in the gaps and arrived at the following procedure:

  1. Purchase your font file or use your existing font file.
  2. Convert the font file to the following formats: OTF, WOFF, SVG, and EOT using a free account at http://onlinefontconverter.com
  3. Create a directory on your website and load the fonts there.  I called mine "fonts" and placed it right in my public web directory.
  4. Embed the fonts with the following CSS:
    @font-face {      
      font-family: "Your typeface";      
      src: url("type/filename.eot");      
      src: local("☺"),          
        url("type/filename.woff") format("woff"),          
        url("type/filename.otf") format("opentype"),          
        url("type/filename.svg#filename") format("svg");      
  5. Use the font in your CSS file in the font-family attribute:
    h2 { font-family: "Your typeface", Georgia, serif; }
  6. Test it on the major browsers to familiarize yourself with what works where.

That's really great.  My company Kibbles Software is officially moving from photoshop images to the @font-face capability.

Please report on your results.

Trackback URL for this post: