I spend a lot of time working with fonts in our PDF to HTML5 Converter and have found that the setup for rendering fonts on the web is pretty complex. Browsers need to run on many different platforms, and so use a range of different font rendering engines – sometimes provided by the operating system, and sometimes as an included library. Chrome and Firefox also use a library called OTS to pre-check fonts, but issues – like incorrect font scaling – occasionally slip through.
We were seeing some converted CFF fonts rendering at the wrong size in Chrome on Android. It turns out that the font renderer used on Android does not support a value called FontMatrix which allows you to apply a scale and transform to all of your glyphs.
Since some fonts are actually drawn at a different size (in my experience, usually around twice the size) and then scaled appropriately using FontMatrix, we have a problem.
So how do we fix it?
First off, we work out the scale from the FontMatrix, then set FontMatrix to the default values. We read the glyph descriptions into an intermediate format, scale them, and then convert them back to binary. We then use these updated glyphs to generate a whole bunch of metrics that browsers use for positioning and scale a few other values to make sure glyph widths come outright.
That might seem like a lot to do just to support a very small set of CFF fonts, but when it comes to fonts, all browsers have their quirks – and we’re committed to supporting as many files, browsers, and platforms as we can.
Hopefully, you have found this useful.