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:
- Purchase your font file or use your existing font file.
- Convert the font file to the following formats: OTF, WOFF, SVG, and EOT using a free account at http://onlinefontconverter.com
- Create a directory on your website and load the fonts there. I called mine "fonts" and placed it right in my public web directory.
- 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"); }
- Use the font in your CSS file in the font-family attribute:
h2 { font-family: "Your typeface", Georgia, serif; }
- 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:
http://jaybhancock.com/trackback/18