The main feature of this project is the use of three gradient types: Linear, Radial and Sweep. Each gradient type creates a different visual result and is embedded in its own variable font file, which can be identified via a tag in the file and family name: LINR, RADL, SWEP. Please note that the type of gradient is currently a factor you must consider when it comes to the compatibility of each font with external environments (see Compatibility)
Each variable COLR font has the same axial setup: three of the four axes deal with colour parameters only:
- The first axis (ADDC) adds colour to the font by expanding the gradient from 0 to 100%.
- The second axis (ANGL) deals with angle and positioning of the gradient itself within the ellipse.
- The third axis (TWST) affects the rotation of the ellipse by creating an incremental twist that spans the length of a specific segment.
.class{
font-variation-settings: "ADDC" 0;
font-variation-settings: "ANGL" 180;
font-variation-settings: "TWST" 0;
}
The fourth axis does not deal with colour and only affects the overall typeface weight, spanning across a range of weights from Light to Black.
.class{font-variation-settings: "wght" 700;}
Each font file in this project contains standard bezier outlines: These are a silhouette of the colour shapes and have primarily been implemented in the fonts as fallback outlines, which will render when the environment in which you use the font does not support COLRv1 or a specific gradient.
⚠️ Please note: these outlines are only fallback shapes that are NOT designed nor refined to be used by themselves.
⚠️ Please note: Our colour fonts are not compatible everywhere. For Example, Adobe Illustrator currently only handles two of the three gradients and seems to normalise transformation values, leading to strange behaviour on the TWST axis.
To give you an overview of current compatibility, the table bellow shows the general state of COLRv1, as of december 2025:
| Plattform | LINR | RADL | SWEP |
|---|---|---|---|
| Chrome | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ |
| Illustrator | ✅ | ✅ | ❌ |
| Indesign | ❌ | ❌ | ❌ |
| Photoshop | ❌ | ❌ | ❌ |
| Safari | ❌ | ❌ | ❌ |
| Affinity | ❌ | ❌ | ❌ |
| Canva | ❌ | ❌ | ❌ |
The environment where COLRv1 fonts currently thrive, is in most browsers (come on, Safari!). What is possible in a browser like Chrome (and still missing in design software like Adobe Illustrator), is that you can access the CPAL table, where the colours of the gradient are defined, allowing you to set your own colours! This is a huge opportunity for adapting the typeface to a specific colour scheme or CI.
@font-palette-values --custom-palette {
font-family: "ColorFont";
base-palette: 0;
override-colors:
0 rgb(63, 38, 38),
1 rgb(0, 255, 255),
2 rgb(204, 0, 204),
3 rgb(200, 100, 155);
}
We’ve added an alternate lowercase s to this project. It is a forward leaning shape that offers both a much more daring shape to insert into your designs, but also deals wit the issue of blobbiness that inevitably occurs with the regular shape in the bolder weights.
.class{font-feature-settings: "ss01";}
Another alternate letter we’ve added is a hand-written lowercase w, which reflects the shape of the lowercase m. By using this shape instead of the default one, you can further accentuate the roundness of the text-image you are designing.
.class{font-feature-settings: "ss02";}
The case feature repositions certain glyphs, whose default version is built for pairing with lowercase letters, to harmonise with the uppercase. Make sure to switch it on in all-caps situations!
.class{font-feature-settings: "case";}
| Release History | 12.2025 | V1.000 |
| Files | OT-TTF, WOFF |
| Format | Variable |
| Fallback Outlines | Quadratic (TTF) |
| File Size | OT-TTF ≈ 880KB WOFF ≈ 430KB |