And there you
Color font details:
Rather than embedding SVG or PNG images in this font, Merit Badge uses COLR
tables to stack glyphs one on top of the next, and control their color.
Variable font details:
Each of these stacked glyphs can change thanks to OpenType Variations
. The stroke weight is controlled by CSS
(200–500) and the serifs can be removed with a custom axis (
font-variation-settings: "SANS" 1
It’s a mix. Merit Badge seems to work nicely in recent versions of Safari, Chrome (depending on the operating system), and Edge. Firefox gets you the color font, but no variations (for now
). Photoshop and Illustrator get you variations, but no color (they support
SVG color fonts, though). But have no fear: you can always use OpenType Stylistic Sets 1–3 to access each of the layers, and then color and stack the text blocks yourself.
to the wonderful members of the Font of the Month Club
for supporting this little endeavor (whether they liked it or not), to Chris Lewis
for creating the color palette customizer tool, and to Roel Nieskens
for sharing his color font expertise and advice. Be sure to also check out our earlier variable color font experiment, Mr. Poo
Correction: I initially dated the font incorrectly; the particular book I have is the 1975 printing of the 1965 edition.