CODEWITHSUNDEEP
google-chromefont-face
Jonas Sourlier
Jonas Sourlier

Reputation: 14455

Chrome renders @font-face font with gaps

Please have a look at this JSFiddle:

http://jsfiddle.net/tCeKm/

We are using a @font-face to embed the font Bitstream Vera Sans. On Firefox and IE, the font renders okay:

enter image description here

On Chrome 35 on Windows 7 however, there are some gaps between the Y character and the following one:

enter image description here

We're using the HTML5 Boilerplate CSS reset, so the differences are most likely a bug in Chrome or a problem with the font.

EDIT: In the Chrome screenshot (second image), the font appears to have a smaller weight. This is only because Stackoverflow scales the second image down since it has too much width.

Upvotes: 1

Views: 84

Answers (1)

RoelN
RoelN

Reputation: 2321

Those "gaps" are missing because there is no kerning being applied to the font. You're likely using Chrome on Windows — Chrome on OSX will show your font properly kerned.

More info in this Typekit article:

Chrome on Windows does not support kerning at all, which is caused by their use of GDI for rendering text. Chrome will soon switch to rendering text using DirectWrite and should then also support kerning and other OpenType features on Windows Vista and above. Kerning is enabled by default in Firefox and Safari 7 (on both OS X and iOS).

Upvotes: 1

Related Questions