@ font-face produces radically different results in browsers

Question

Just grabbed the @font-face package for our site and placed the following CSS code:

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

Unfortunately, the results in different browsers are very different. Only Firefox gets this on both Windows and OSX; others are everywhere.

Here is what we see:

Any tips or indicators of what might be wrong / browser behavior with fonts would be greatly appreciated.

Answer 1

Speaking from personal experience.

@font-face really works fine, and the technique you are using is more of a problem with the font file.

Some fonts will display approved cross-browsers (read “the result is nice and readable for the eyes”), and some will just get the hinting font all wrong. I usually try to use several similar fonts and see which one gives the best cross-browser results, since not all browsers use the same hint process.

It also depends on the quality of the font - some of them are simply not designed to be used on smaller sizes, poorly designed - each font file comes with its own prompting instructions that determine how to turn pixels on and off in different font sizes to render the font the most readable way.

Hopefully I have given you some idea of ​​what might happen for everything that I can barely provide you with a fix for this exact example.