Fonting while Queer Font Friday

In-person LGBTQIA+ celebrations may be cancelled this year, but a new(ish) typeface can soothe your wounds with rainbow colored strokes. Behold: the typeface “Gilbert.”

[Update] I’m getting some formatting errors in this post, so here’s a link to the original article:

On 31 March, 2017, Gilbert Baker the creator of the iconic Rainbow Flag sadly passed away. Mr. Baker was both an LGBTQ activist and artist, and was known for helping friends create banners for protests and marches. To honor the memory of Gilbert Baker,  NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named ‘Gilbert’ after Mr. Baker. A preview version of the font can be downloaded for free in the download section.

Download ‘Gilbert’

The Gilbert font was originally designed for striking headlines and statements that could live on banners for rallies and protests and it is now currently being built out into a whole family of weights and styles. The font is available in two versions, a standard vector font and a color font (in OpenType-SVG format) currently usable in Photoshop CC 2017, Illustrator CC 2018, InDesign CC 2019 and above. Both fonts are early beta previews that you can download below for free, and you can follow @TypeWithPride on Instagram and on our development blog for news about new font weights, styles and creative contests.

Learn more about color fonts on Fontself’s dedicated website:

NEW: now includes Katakana characters


Use Gilbert on your smartphone

You can even use the Gilbert font on your smartphone thanks to the Fontself free app that includes other creative fonts. It lets you share iconic messages & posts with your friends.


Use Gilbert on any website

Gilbert can be displayed on any web page thanks to a web font version, hosted on Fontself Catapult.

[While this color font looks great on Safari & Firefox, Google Chrome does NOT display colorful letters yet – only black glyphs will be displayed there. You can learn more about compatibilities on]

  1. Copy & paste this code in the <head> of your HTML page:

    <link href="" rel="stylesheet">

    Or add this line to your CSS:

    @import url('');

  2. Apply the font family gilbert-color-bold-preview5 to CSS elements:

    h1 { font-family: 'gilbert-color-bold-preview5'; }

    Or insert the class fs-gilbert-color-bold-preview5 into HTML elements:

    <h1 class="fs-gilbert-color-bold-preview5">This is Gilbert Color!</h1>

Download Gilbert Animated

Type with Pride partnered with Animography to create Gilbert Animated, a motion-ready typography resource designed for animation, film, video, social posts, GIFs and much more. The free animated font is useable in Adobe After Effects. Find out more at


Type With Pride in the news

Partners & Contact

Have any questions? Visit our FAQ page. Interested in a partnership with Type With Pride? Say hi at