Font Embedding using Font Squirrel’s @font-face Generator

Font Squirrel

Font embedding is something I haven’t implemented into website development until recently. The main reasons for this was lack of browser support and the preparation and process that goes with making a font work within a website didn’t make it a worthwhile effort, especially when alternative methods of using graphics was satisfactory and gave a consistent cross-browser look.

Fortunately, the guys at Font Squirrel has made this process a bit easier by providing a service that gives us our desired fonts in all the necessary formats required by all the major browsers. With their @font-face Kit Generator, you upload your desired font (make sure it’s properly licensed), and it will spit out a downloadable package that contains your font in all the necessary formats needed plus the @font-face css code needed for implementation.

For example, uploading a font “MyFontFamily.otf” to the generator will result in in a downloadable package containing, “myfontfamily-webfont.eot” (needed for Internet Explorer 4+), “myfontfamily-webfont.svg” (required for iOS 4.2 and under), “myfontfamily-webfont.woff” (IE9+, FF3.6+, Chrome 5+) and “myfontfamily-webfont.ttf” (raw truetype file that works with FF3.5+, Safari 3.1+, Chrome 4.0.249.4+ and Opera 10+). You would then attach the @font-face CSS provided into your site’s CSS file:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Make sure your fonts are placed and being called from the proper location and declare “font-family: ‘MyFontFamily’;” in your CSS where you want your font to show up. That’s it!

Check it out!