How do I prevent different browsers from adding more width to words via @font-face?

Question

See images:

Firefox on Mac:

enter image description here

Firefox on Chrome:

enter image description here

On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it?

I am using a font with @font-face property.

It does not look like the same font; the first screenshot seems to use a bold font. Anyway, posting code that lets others see the problem in action would be essential. — Jukka K. Korpela, Jun 27 '13 at 22:31
It is the same font and i am using font-weight: 600; Let me post the code for the font. — starbucks, Jun 27 '13 at 22:42
You do know that text renders differently on PC vs Mac, right? There's pretty much nothing you can do about this. — cimmanon, Jun 27 '13 at 22:58

score 1 · Answer 1 · answered Jun 28 '13 at 01:47

Unfortunately, there isn't much you can do about the way each browser renders your chosen typeface. Check out this article, it explains how different browsers and operating systems render different type face files:

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

In the meantime, you can do two things.

1.) There are many fonts that can be used that are effected by this rendering difference much less. Experiment with different fonts that hold the same esthetic value of the font that you are using, and try to find one that not only fits your typographic needs but also have a less distinctive difference between their individual renderings across different platforms.

2.) Create a script to sense the user's browser/OS and use that script to adjust your font-weight accordingly.

Best of luck.

score 1 · Answer 2 · answered Jun 28 '13 at 14:50

You forgot to mention which of the two cases is the correct font rendering.

A few ideas that come to mind:

Since you mentioned using font-weight:600 I would try to replace it with normal/bold (depending which result you want) and check if it makes any difference. If the font file does not support a weight for 600 the browser will go on interpreting it by itself - sometimes it takes bold sometimes normal.

If the problematic browser is Chrome you can also try playing with font-smoothing - sometimes it helps improving the font rendering:

-webkit-font-smoothing: none || antialiased || subpixel-antialiased

Also I'm not sure how you are implementing the @font-face - if you wrote it yourself I suggest generating your @font-face rule trough some service like Fontsquirell since it will generate a crossbrowser compatible code which often eliminates a few problems.

For more help you will need to expand your question with a bit more data - add the @font-face code, font name and specify which is the correct font rendering. Poor questions get poor answers.

How do I prevent different browsers from adding more width to words via @font-face?

2 Answers2