Question

I’m using the web font Bitter on my site. Initially I had embedded it from Google Web Fonts, but Google Chrome/Win wasn’t rendering the .woff properly (it had weird jagged artifacts at smaller sizes). After Googling a bit I found that Chrome/win typically has trouble with that format, and that using an SVG can solve it. That meant I had to host/embed the file myself rather than using Google Web Fonts. I used Font Squirrel to get the proper @font-face code, and all seemed fine until I tested in IE9/Firefox on Windows. Both browsers are rendering the capital T’s smaller than the rest of the capital letters (like this http://d.pr/i/LIty)

Here is my font face code

@font-face {
    font-family: 'bitter';
    src: url('fonts/bitter-regular-webfont.eot');
    src: url('fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-regular-webfont.svg#bitterregular') format('svg'),
         url('fonts/bitter-regular-webfont.ttf') format('truetype'),
         url('fonts/bitter-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'Bitter';
    src: url('fonts/bitter-italic-webfont.eot');
    src: url('fonts/bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitter-italic-webfont.svg#bitteritalic') format('svg'),
         url('fonts/bitter-italic-webfont.ttf') format('truetype'),
         url('fonts/bitter-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

How I understand this embedding, the browsers use the first file format that they can accept and then ignore the rest? If I remember browser compatibility correctly, that means IE is using the EOT, Chrome is using the SVG, and Firefox is using the TTF. So at first it would seem that something was wrong with the actual files, but Firefox is rendering the font just fine on Mac.

You can see it live at http://dev.thesmackpack.com. Is there anything I can do to fix the font files, or make them use the proper formats, or something?

EDIT: I downloaded a copy of the font from the original creator and ran it through the Font Squirrel generator, unchecking all the options that modified the file. The T’s are fixed, but now the bad rendering artifacts are appearing in FF and IE. http://d.pr/i/5sVT

Answer 1

Sadly, I was unable to find a sufficient solution to this problem. I switched back to the Google Web Fonts version (with the jagged artifacts but without the broken letter sizing) and changed the font sizes around to minimize the artifacts (they were worse on particular sizes). It’s still not great but it’s the best I can do.

Lesson to be learned here:
Test your web fonts in all sizes on all browsers on all OSes before starting development.