Question

I’m using a font called Gotham on my new website. It was not font-face ready, so I did that myself. It works fine on my Mac, and works fine too in my Windows machine in Chrome and Safari. But the font is not rendered smooth in IE and FireFox

See the images attached for the difference. (I can’t post images yet because I’m a new registered user, so see this link for the screenshot: http://i45.tinypic.com/f35hqq.png

This is how it is set up. I think I did okay, because the fonts are shown in all browsers, just the rendering is not optimal in all of the Windows browsers.

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

Is there any way to fix this? Maybe a jQuery solution or something?

Answer 1

Have you included all necessary font types? Each browser recognizes different font formats. If you converted the font for use on the web using a service such as Font Squirrel: http://www.fontsquirrel.com/ then you should have been provided with each font type as well as some example CSS (below) to plug in. Make sure to include each format in your @font-face selector to optimize the font across all browsers:

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

Hope this helps! Gotham is a great font 🙂

EDIT: Windows has some issues with displaying fonts properly. I use Mac OS and Windows on a regular basis and notice many inconsistencies. I think you’ve done all you can do without intervention from the major browsers. Good luck!