We’ve spent a lot of time making sure that fonts inside PDFs look good when run through our PDF to HTML5 converter. In the process, we’ve learned a lot about how to make sure fonts look good in HTML5. Here’s our top 5 tips!
1. If possible, use TrueType outlines
Most modern font formats are a little more complex than some others – they consist of a container format (WOFF, EOT, OpenType) which provides some data required by all font types and an outline format (TrueType’s ‘glyf’ and ‘loca’ tables, CFF) which describes the glyphs of the font.
While there are definite advantages to each outline format, historically browser support for TrueType based fonts has been better, resulting in clearer rendering of text. This is less true than it used to be, but you may also want to include a pure TrueType version of your font to make it work in more mobile browsers.
2. Avoid fonts which have been converted from CFF to TrueType
While TrueType outlines are in some ways more practical, if only CFF outlines are available it’s probably better to use them than convert them to TrueType. I’ve written a whole article on this before but to summarise, it’s impossible to convert the curves which make up the glyphs perfectly and hinting data needs to be automatically generated which often leads to poor rendering.
3. Make sure the name isn’t too long
There’s an odd issue in Internet Explorer which only allows for fonts with names up to (but not includin
g) 32 characters long to be displayed. Since it fails silently if this is not the case, it’s well worth keeping in mind as it’s very hard to track down!
4. Include EOT fonts for IE8
Earlier versions of Internet Explorer only support a font format called EOT which has since been made effectively obsolete by WOFF (and more recently WOFF2). EOT is only supported by Internet Explorer, and WOFF has been supported in IE since version 9, so it is just for IE8. (IE8 still has 4% of global browser usage at time of writing…)
5. Test on different browsers/OSs
Ultimately the best way to make sure you’re getting the most out of online typography is to test your font in as many different browsers on as many different platforms as you can. Rendering methods vary hugely, so don’t assume that a font will look the same in Chrome on OSX as it does in Chrome on Windows!
I hope you find these tips useful. Is there anything else you do to make sure fonts render properly in browsers?
Latest posts by Sam Howard (see all)
- PDF to HTML5’s Holy Grail – Vertical positioning for PDF fonts - October 8, 2015
- WOFF 2.0: What is it, why is it coming, and what’s next? - April 2, 2015
- Web fonts: A quick introduction to Wrapper and Glyph formats - February 27, 2015
- 5 tips for using fonts in HTML5 - January 29, 2015
- A Beginners introduction to Unicode - December 4, 2014