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.

Web fonts: A quick introduction to Wrapper and Glyph formats

1 min read

I was planning to write about WOFF 2.0 this week, and wanted to link to a previous article I’d written which explains the structure of web fonts. Much to my surprise, I realised I somehow hadn’t written it yet! So WOFF 2.0 will have to wait until next time. Here’s a quick introduction to the structure of web fonts.

A rough overview of the structure of web fonts
A rough overview of the structure of web fonts

Wrapper formats

Apple and Microsoft first developed TrueType in the late ’80s to avoid licensing Type 1 from Adobe. They created a set of binary tables, along with a directory giving offsets and meta data. Splitting up the data like this allowed for tables which provided optional features. It also made the format very easy to extend later on.

Microsoft and Adobe first developed OpenType in the mid ’90s to avoid licensing AAT from Apple. (Spotting a theme here?) They aimed to unify TrueType and Type 1 fonts, and TrueType’s table-based structure made this easy. The wrapper format for OpenType is identical to that for TrueType. The only difference is you use ‘OTTO’ as the version number if the font uses Type 1 glyph tables.

WOFF and EOT contain the same tables but also apply compression. They have slightly different table directories as a result. (The W3C says WOFF is the preferred format for web fonts going forward.)

Glyph tables

The most important tables are undoubtedly those which contain the glyphs of the font. While there are some tables for providing bitmap glyphs, these are very rarely used. Mostly, you will either be using TrueType or Type 1 outlines.

TrueType outlines consist of two tables. The ‘glyf’ table contains the outlines themselves, while ‘loca’ functions as its index. These will usually be accompanied by the TrueType hinting tables ‘cvt ‘, ‘fpgm’ and ‘prep’.

Type 1 outlines use the ‘CFF ‘ table instead. CFF fonts contain the same data as a Type 1 font in a much smaller form. The table itself is a complete font format which can (and is – especially in PDF files!) be used as a font all on its own.

(Just to get all ‘Inception’ on you, CFF itself is a container for PostScript-based glyph formats. The specification says either Type 1 or Type 2 outlines are acceptable. However, I’ve never found any CFF fonts containing Type 1 outlines or any software which supports them.)

And that’s where web fonts come from!

Hopefully this gives you an idea of how wrappers and glyphs combine to create the web fonts you know and love. Next time: WOFF 2.0!

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.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

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.

Resaving Acrobat Forms in the Browser

With the removal of Acrobat Reader support in Chrome and other browsers, we have seen a big increase in the number of clients asking...
Mark Stephens
1 min read

Leave a Reply

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