Gilbert Color: A Font with Pride 🏳️🌈
The rainbow flag is the renowned symbol of LGBTQ+ pride and activism. Created by Gilbert Baker in 1978, the simple flag has been adapted into many forms and artifacts to represent LGBTQ+ culture.
As it happens, one of those artifacts is a font that captures the joy and vibrance the flag emanates.
It’s called Gilbert Color, named after the flags creator. It’s also unlike any other font you’ve seen before.
Usually with a font, glyphs (as in, characters) are monochrome. You color it either in the design app you use (Sketch, Figma, Photoshop, etc.) or with CSS styles on the web.
The new OpenType-SVG font format allows a glyph to retain color data, so each glyph can have multiple colors defined within it. These new fonts are simply called Color Fonts, and they are delightfully easy to use too.
On a PC or a Mac, you can just download the font from TypeWithPride.com and install as any other font. It will work as intended in some apps, such as Photoshop or Sketch, but will use the monochrome fallback version in others such as Figma.
In software and operating systems that allow selecting individual glyphs, you can even select other color combinations for each character.
Note that while Safari (iOS/macOS), Firefox, and older versions of Edge display color fonts, Chrome and new Edge again use the monochrome fallback2.
April 2021 Edit: I recently realized that the FontSelf-served version stopped working, so I started self-hosting the font for this post. ↩︎
In fact, I used the CSS
@supportsfeature to target a Safari-only (
hanging-punctuation) and a Firefox-only (
-moz-orient) feature, so that the title shows up in Gilbert Color in them, but in the regular font in other browsers. Magic. ↩︎