Fafofal: Fabulous Font Fallbacks

3 (optional) Align baselines

Play with the ascent-override until baselines align visually. Use the bottom of letters such as z, n or m as a guide to where the baseline is. The descent-override will autoupdate in the opposite direction so the height stays the same.

Red is the fallback you're matching to the blue.

The zebra jumps quickly over a fence, vexed by a lazy ox. Eden tries to alter soft stone near it. Tall giants often need to rest, and open roads invite no pause. Some long lines appear there. In bright cold night, stars drift, and people watch them. A few near doors step out. Much light finds land slowly, while men feel deep quiet. Words run in ways, forward yet true. Look ahead, and things form still, yet dreams stay hidden. Down the path, close skies come, forming hard arcs. High above, quiet kites drift, fast on pure wind, yanking joints.

ascent-override: % you can use up/down arrows too

4 Result

5 Test area

This is the test area where you can see the text formatted by the custom font and the fallback and comapre the two. This area also has a double purpose: to describe the tool, a documentation of sorts.

On the left is the custom font and on the right is the fallback.

You can overlap the two texts, in which case the fallback is red and the custom font is black.

Before we begin

There are a few articles with more information about the font fallback technique:

Prior tools

This tool build upon and draws inspiration from existing tools, namely:

Monica's
Malte's and a newer version

Other tools that are not necessarily about fallbacks but are good to know:

Now that you know about wakamaifondue (what can my font do) you can probably tell where the inspiration for this tool's name came from. Fafofal - short for Fabulous Font Fallbacks and sounding a bit like falafel.

What tech powers this tool?

Other than misc hackery and tweakery, the external libs used are:

opentype.js to read the font files' metadata
wawoff2 to decompress WOFF2s

Oh, and everything is local in the browser, your custom fonts are not uploaded anywhere.

Is it open source?

Yes, the code is available right here: Fafofal on GitHub.

And there's also a list-o feature requests here

Fafofal Fabulous Font Fallbacks

1 Pick a webfont file