I spend a lot of time working with fonts in our PDF to HTML5 Converter and have found that the set up 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 which browsers use for positioning, and scale a few other values to make sure glyph widths come out right.
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.
Did you know...
IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?
It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page