Merit Badge is a variable color font.
Browser support is actually not too shabby.
It comes from modular letters found in a 1970’s Boy Scout guide.
It has slab serif
and sans serif
versions.
It has an inline with variable thickness.
Some color palettes are already built in.
CSS font-palette is not supported yet, though.
So for now, customize your colors here.
Color font details: Rather than embedding SVG or PNG images in this font, Merit Badge uses COLR and CPAL 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
font-weight (200–500) and the serifs can be removed with a custom axis (font-variation-settings: "SANS" 1).Support: 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.
Many thanks 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.