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

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
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:


Groups audience: 

Group content visibility: 

Public - accessible to all