Search code examples
cssfontsfont-face

Using custom fonts with css font-face, different on different browsers

Let me give you some examples:

Firefox 13:

enter image description here

Chrome (latest):

enter image description here

As you can see, in Firefox the font appears smoother, and in Chrome choppier. I'm curious as to why this is happening and steps I can take to even out the experience for my users.

I'm using an .otf font:

HelveticaNeueLTPro-LtCn.otf

And using the following CSS rules to apply this custom font:

@font-face {
    font-family: "Helvetica Neue LTPro";
    src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
}

a {
    color: #665548;                
    display: block;
    font-family: "Helvetica Neue LTPro";
    font-size: 15px;
    padding: 17px;                
}

What do you recommend I use to even out the font differences? Or better yet, what's a good practice way to use "Web safe" fonts? Does such a thing exist?

Solution

  • Unfortunately you can't just take any font, convert it and have it work well in all browsers. I'd love it if you could but you can't.

    Your best bet for getting good results is to use a font delivery service such as typekit or fontdeck that provide fonts that have been designed for delivery across browsers and so have a better chance of rendering consistently. You're still likely to get small variations across browsers and operating systems though, that's the nature of the web.

    But in answer to your question specifically, there are no settings or workarounds to make that font appear consistently. For what it's worth I think they both look fine.