Sam Howard

Sam is a developer at IDRsolutions who mostly specialises in font support and conversion. He’s also enjoyed working with Java 3D, Java FX and Swing. His other interests include music and game design.

5 tips for using fonts in HTML5

1 min read

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!

quill_html5

I hope you find these tips useful. Is there anything else you do to make sure fonts render properly in browsers?

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

Sam Howard

Sam is a developer at IDRsolutions who mostly specialises in font support and conversion. He’s also enjoyed working with Java 3D, Java FX and Swing. His other interests include music and game design.

Leave a Reply

Your email address will not be published. Required fields are marked *