One way to resolve OSX vs. Windows browser font rendering problems with custom fonts

Bob Schmitt's picture

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:

@include font-face("Myfont",
font-files("myfont-bold-webfont.ttf", truetype,
"myfont-bold-webfont.eot", embedded-opentype,
"myfont-bold-webfont.svg", svg,
"myfont-bold-webfont.woff", woff)
);

Using regular css:

@font-face {
font-family: 'Myfont';
src: url('myfont-bold-webfont.eot');
src: url('myfont-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-bold-webfont.woff') format('woff'),
url('myfont-bold-webfont.ttf') format('truetype'),
url('myfont-bold-webfont.svg#DiverdaSerifComBold') format('svg');
font-weight: normal;
font-style: normal;
}

Then, to use the font, just use the normal syntax for calling out the font, e.g.:

font-family: "Myfont", serif;

Other references:

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://www.fontsquirrel.com/fontface/generator

Tags: 

Groups audience: 

Group content visibility: 

Public - accessible to all