Typefaces
The HTML renderer bundles three font variants — Noto Sans, Noto Serif, and
PetalumaScript (a handwritten Real Book style) — so charts have a consistent
house style wherever they appear, with no network dependency. You can also override the font entirely using the
--grigson-font-family CSS custom property, which lets you bring
any typeface you like.
Below, the same "Autumn Leaves" chart is rendered three ways. Notice how the lining figures in the Noto fonts keep chord extensions (7, 9, 11…) sitting neatly on the baseline, unlike the old Georgia default where digits like 3, 4, 5, 7, 9 dipped below it.
Sans-serif (default)
Noto Sans — the default when no typeface attribute is set.
Autumn Leaves
B♭ major
A
B
Serif
Noto Serif — set typeface="serif" on <grigson-html-renderer>.
Autumn Leaves
B♭ major
A
B
Cursive
Petaluma — set typeface="petaluma" on <grigson-html-renderer>.
Autumn Leaves
B♭ major
A
B
Finale Jazz
A jazz handwriting style derived from the OFL-licensed Finale Jazz font by MakeMusic,
loaded from jsDelivr and applied via --grigson-font-family on the
<grigson-chart> element.
Autumn Leaves
B♭ major
A
B
Kaushan Script
An external display font loaded from Google Fonts, applied via
--grigson-font-family on the <grigson-chart> element.
The Real Book notation preset is used here to avoid the △ character,
which this font does not cover.
Autumn Leaves
B♭ major