AKA "The Bulletproof Method"
I recently ran into an issue where a font library included in a website using the @font-face command was rendering differently in different browsers, on different platforms.
I had uploaded a licensed TrueType font and it seemed to work on all the OSX browsers, but we were getting varied results on Windows browsers and platforms -- seemingly random combinations would make lines longer, which would break a navigation menu, and it would break the rest of the page.
After playing with a bunch of methods to allow the menu bar to shrink expand, Benjamin suggested I run the font (licensed from Linotype) through http://www.fontsquirrel.com/fontface/generator.
This generator created platform optimized versions of the font and produced four separate font files, (truetype, eot, svg and woff). Once uploaded and defined using a compass/scss version of including @font-face files in a web project, the font problems mostly disappeared.
To summarize, the process to resolve this problem was:
1) Acquire the licensed .ttf file.
2) Upload to http://www.fontsquirrel.com/fontface/generator
3) Download the results locally to determine the names of the resulting files
4) Upload the optimized font files to the theme's font directory (in this case, located in ./theme/css/fonts)
5) Include the fonts in the theme.
Using the compass/scss syntax:
Using regular css:
src: url('myfont-bold-webfont.eot?#iefix') format('embedded-opentype'),
Then, to use the font, just use the normal syntax for calling out the font, e.g.:
font-family: "Myfont", serif;