[OTVar] Learning about OpenType variable fonts

Peter Constable

If you've heard about variable fonts being supported in OpenType 1.8 and want to learn more about the details of how they work, I recommend these two resources:

Start with John Hudson's excellent article announcing the introduction of variable fonts in OpenType 1.8: Introducing OpenType Variable Fonts. This gives a broad overview that touches on several technical aspects but without getting too technical.

If, after reading John's article, you're ready for more details, the OpenType spec itself includes a chapter that gives an overview, particularly of the variation mechanisms: OpenType Font Variations Overview. This goes into more detail about how variation of the font's data works. It includes specific details about algorithms used (very nerdy), but also has some not-so-technical descriptions (a little nerdy), with examples and lots of images, to try to explain the key concepts. If you don't care about the really nerdy bits, scan past those. Toward the end, there's an "Interpolation example" section that walks through details about the variation data for a particular glyph (simple -- only 4 contour points to keep the details to a minimum) and how the interpolation of the data would work for a particular instance. If you can follow that example, you should have a good grasp of how the variation mechanisms work.

If you've read these, it will help to get feedback on what parts were helpful or not so helpful, and what key gaps should be covered in these kinds of introductions that were missing. It would be great to get responses in this thread. (For getting answers to specific questions, though, spinning off separate threads would be best.)

Chris Lewis

I read in the introduction thread that Chrome and Edge on Windows 10 already support a subset of the new format (basically accessing predefined widths/weights that fit into DirectWrite's universe as it already existed). Is there an explainer anywhere on what CSS to use to accomplish this?

Peter Constable

On Windows 10 with the Anniversary Update, named instances of variable fonts with weight or width axes can be accessed using existing CSS font-weight and font-style properties. The fonts must be locally installed -- no @fontface support until that's defined. The only weights/widths that can be selected are named instances, and it's not guaranteed that every distinction will be recognized.

Chris Lewis

Thanks!

Thomas Phinney

Oho! I had misunderstood a key point about this from our discussions offline: I thought we could access anywhere in the design space, not just named instances. Thanks for clarifying.