Same font files, same PC, same OS, same browser, same code--two different rendering results on two different sites. What gives?

Question

I'm running into an incredibly frustrating issue with webfonts on my employer's website. (screenshot here: https://i.stack.imgur.com/5FG2J.jpg)

I've added all the font files and, as best as I can tell, written the code correctly. However, the text is rendering incredibly jagged and ugly in Chrome and Firefox. What's bizarre is that a simple test I set up using the same font files, same @font-face code, and same CSS for the text itself is rendering just fine in the same browsers on the same machine. Any idea what might be causing the crappy rendering on the full website? URLs to both are below for reference.

Company website: http://staging.lmsonline.com/services/email-marketing/

Simple test: http://datafulfill.com/fonttest/demo.html

Screenshot (Windows 7, Chrome): https://i.stack.imgur.com/5FG2J.jpg

Could it have to do with the font weight? (300 in the demo vs 400 in the original site) — Mr Lister, Aug 07 '13 at 20:00
Good catch, but no. I just tried changing it to 300 and still no luck. — dannymcgee, Aug 07 '13 at 20:08

score 0 · Answer 1 · answered Aug 07 '13 at 23:33

Not sure, what your font is supposed to look like. At my end it arrives sort of Arial, which is pretty much the same as a generic sans-serif anyway. Playing around with fonts in the past taught me to address the issue in this order:

@font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.eot");
}
@font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.ttf");
}

First serve IE, then the rest. For some reason it never quite worked the other way around.

Same font files, same PC, same OS, same browser, same code--two different rendering results on two different sites. What gives?

1 Answers1