I'm trying to create a decent cross-browser rendering engine of canvas text. I have noticed that kerning pairs don't render properly in Chrome, but in Safari and Firefox they work fine.

Chrome:

Firefox:

Safari:

Try the fiddle here: /

Code sample:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("VAVA Te", 10, 50);

Does anyone have any workaround? I have looked for bug reports, but I can't find anything.

I'm trying to create a decent cross-browser rendering engine of canvas text. I have noticed that kerning pairs don't render properly in Chrome, but in Safari and Firefox they work fine.

Chrome:

Firefox:

Safari:

Try the fiddle here: http://jsfiddle/o1n5014u/

Code sample:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("VAVA Te", 10, 50);

Does anyone have any workaround? I have looked for bug reports, but I can't find anything.

• javascript
• google-chrome
• canvas
• fonts
• kerning

• 2 BTW, it’s the same for SVG but then we have font-kerning: normal; that solves it. I wish we had the same for Canvas... – David Hellsing Commented Sep 21, 2015 at 17:49

2 Answers 2

From W3 CSS3 Fonts:

To explicitly turn on the font-kerning you need to set the font-kerning property to normal,

canvas{
    font-kerning : normal;
}

Check this JSFiddle

Based on this article on Cross-browser kerning pairs & ligatures, Alternatively you can use the optimizeLegibility like this,

canvas{
     text-rendering: optimizeLegibility;
}

Check this JSFiddle

The declaration is currently supported by: Safari 5, The Webkit Nightlies & Chrome.

Firefox already uses optimizeLegibility by default for text sizes above 20px.

It's not much of a help, but we had this same issue with a text processor application that is running in a browser.

We tried the following canvas settings that don't work:

• canvas.style.fontKerning (settings this to none should disable kerning, but it does not work)
• canvas.style.textRendering (settings this to optimizeSpeed should disable kerning, but it does not work)
• canvas.style.letterSpacing (settings this to 0 should disable kerning, but it does not work)

Our solution is to prevent the kerning from happening, by drawing each "letter" one-by-one after each other onto the canvas. For this however you need to calculate the glyph widths using the font metrics from the font file.