Search code examples
cssfirefoxfontstextareamozilla

Text advancing by a few pixels per character


I made a font. Some characters are intended to be combined (one glyph overlaid onto another, similar to प + े = पे).

This works fine when I import the font into a document editor, for instance, Libre Office. It also works fine when I type the script in a textarea in Google Chrome.

However, when the font is used in a textarea in Firefox, a tiny increment is made after each character, even though the horizontal advance is set to 0 in the TTF font file data.

This seems to be something built into Firefox, but it makes the combining look a bit off, and, if I wanted to overlay several characters on each other, it would look very bad. I think I read somewhere that Firefox knows to turn this off for certain fonts, but I cannot figure out how to do it. Or perhaps there's something in the CSS styling for the textarea? I'm at a loss.


Solution

  • Does CSS letter-spacing: 0; make it what it should be, or messing with that negative or positive get you anywhere?

    Or check out the property font-kerning as well.