Share
sIFR to @font-face Site Conversion
November 3, 2009
Recently, I was browsing CSS Beauty and noticed quite a few articles on the CSS3 @font-face rule. I have always been somewhat unhappy with sIFR - I just don't like having Flash files as header text. However, after reading more about the @font-face rule, I found out that it may be a suitable substitute for my special headline fonts - it's also mostly cross-browser compliant (and Google Chrome will be adding support in the next version). So, I decided to change my sIFR font headings to use the @font-face rule and my process is detailed below.
The first obstacle that I encountered during this process was obtaining a font that allowed for distribution (this is a tough issue since many fonts that you normally use on a site have a different license that does not allow for distribution). So, I was going to have to replace my Century Gothic font and, after some searching on the internet, I found the Liberation Sans font by Red Hat to be acceptable. Next, I know you've been expecting it, but there comes some trouble from Internet Explorer. The font was delivered as a TrueType font. This works for Safari, Firefox, and Opera, but Internet Explorer is expecting a specific, proprietary format called Embedded OpenType that was designed by Microsoft to protect font creators. However, there is a command-line tool available called ttf2eot that will convert your fonts to the eot format. It is also worth noting that the tool will only work for TrueType fonts. If you have an OpenType font, you'll need to convert to TrueType. The only tool that I've found (that's free) to make that conversion is Font Forge. Font Forge only runs in Cygwin, X11, or Linux and requires certain libraries. So, if you're going to go that route, follow the specific instructions here for setup on Windows (make sure that Cygwin was installed with the proper external libraries and dependencies) and here for setup on Mac. I'll assume Linux users can get it working, since it's native to that platform. After you've got your font files (hopefully a .ttf and .eot file for each font you'd like to use), you need to set the @font-face rule in your CSS. You're going to want to use conditional comments to isolate Internet Explorer's rule. You'll also want to use the !important modifier on the Internet Explorer styles. Here's what your @font-face rule might look like:<!--[if IE]>
@font-face { font-family: "Liberation Sans Regular"; src: url("fonts/LiberationSans-Regular.eot") !important; }
<![endif]-->
@font-face { font-family: "Liberation Sans Regular"; src: local("Liberation Sans Regular"), url("fonts/LiberationSans-Regular.ttf") format("truetype"); }
h2 { font-family: "Liberation Sans Regular", Verdana, sans-serif; }