leaflet

Fonts and footnotes!

Lab Notes 024: adding curated (and custom) typefaces to Leaflet theme options, and a whole new way to add footnotes (and sidenotes!) to posts

Leaflet Lab Notes

Mar 6, 2026 · 2 min read

e hinted that we were dropping two F-bombs — a pair of long-awaited features — fonts (okay, typefaces) and footnotes!

Fonts

Leaflet now has six curated typefaces — our original favorite, iA Writer Quattro, plus:

Atkinson Hyperlegible Next
Lora
Monterrat
Sometype Mono
Source Sans 3

We have settings for both body and header font, so you can mix and match for just the right amount of contrast.

You can also add any custom font available on Google Fonts! Paste in the font name and we'll load it right in.

Unsupported block: pub.leaflet.blocks.page

The arbitrary Google Font option is particularly fun for adding funky header fonts. And useful if you need a font that better supports non-English scripts.

Paired with our existing theme options, you've not got more ways to be expressive in Leaflet and give your posts and pubs their own special flavor.

We tweaked font sizes a bit too, mainly bumping the header scale overall and adjusting base size for some of the fonts to more or less match better. Future idea: more settings for size and spacing…

Footnotes

One of our top editor requests. Add footnotes from the editor toolbar, and they show…in three places, actually!

* Footnotes: classic, bottom of post
† Sidenotes: easy reference, with wider windows
‡ Popover: tap to preview, great on mobile

Here's what they look like:

And some examples of footnotes in action:

Unsupported block: pub.leaflet.blocks.page

We can't wait to see how you use both these new features!

Fun Google Fonts for headers!

Examples

Leaflet posts with custom fonts!

Unsupported block: pub.leaflet.blocks.website

Examples

Leaflet posts with footnotes!

Unsupported block: pub.leaflet.blocks.website

Leaflet Lab Notes

@leaflet.pub