Drawing a document in fonts you don't have

Every Word or PowerPoint file names its fonts: Calibri, Candara, Franklin Gothic, Aptos. Windows has them. Your browser probably doesn't. And I can't just ship them with the app, the licences don't allow it.

The usual answer is "fall back to something similar". The problem is that similar isn't good enough. If the stand-in is 3% wider, a line that fit now wraps. A paragraph gets a line longer. The page breaks somewhere else. A title spills onto a second line. It stops being a font problem and becomes a layout problem.

Measuring fonts I can't use

I can't ship the real fonts, but I can measure them. Word on Windows writes PDFs with the exact position of every character. So I made documents full of text in each font, exported them from Word, and read the width of every letter out of the PDFs.

Then I took open-licence fonts that look close and stretched them, letter by letter, until each character has the same width as the original. Not the same shape, just the same width. Text in the stand-in now breaks lines in exactly the same places.

Two examples:

A licence detail I didn't expect: Carlito's licence reserves the name "Carlito", so a modified copy isn't allowed to use it. The stretched version needs its own name.

Fonts hidden inside the file

Some documents bring their own fonts. PowerPoint and Word can embed them, but not as normal font files:

• PowerPoint uses an old format called EOT, often compressed with MicroType Express, a scheme from the late 90s.
• Word scrambles its embedded fonts using the font's own ID as the key, so you can't just unzip the file and take them.

Both are documented, and as of this week both are decoded in the browser. A font that comes with the document gets used for that document, which is exactly what the author expected.

The order that works

When drawing text, the renderer now tries, in order: the font embedded in the file, the font on your own computer, then a fitted stand-in. Only if all three fail does it guess from the name.