Introduction to Color Typography
Web typography has traditionally been monochromatic, with fonts defining shapes and CSS controlling colors through the color property. But what if fonts themselves could contain multiple colors that work together to create meaning? Enter COLRv1 and CSS font-palette--two modern web technologies that together enable sophisticated color typography directly in font files.
This guide explores the technical capabilities of COLRv1 color fonts, how CSS font-palette gives you control over color palettes, browser support considerations, practical use cases, and tools for creating your own color fonts. By implementing these techniques as part of a comprehensive web development strategy, you can create visually stunning typography that enhances user engagement and brand recognition.
What Is COLRv1?
COLRv1 is an evolution of the COLRv0 color font format, part of the OpenType specification. While COLRv0 introduced the concept of layered color glyphs, COLRv1 significantly expands what's possible by adding support for gradient fills, composition and blending operations, and improved internal shape reuse.
The original COLRv0 format allowed fonts to define glyphs as multiple solid-color layers stacked on top of each other. This worked for simple cases like flag emojis or two-tone icons, but it couldn't support the rich visual effects that designers often want. COLRv1 addresses these limitations by adding a complete gradient system and transformation capabilities.
Gradient Support
COLRv1 introduces four types of color fills that go beyond solid colors:
- Linear gradients - Colors transitioning smoothly along a straight line, perfect for subtle shading or dramatic color transitions
- Radial gradients - Colors radiating outward from a center point, ideal for creating depth and spotlight effects
- Conical gradients - Colors transitioning around a central point like slices of a pie, enabling unique visual effects
- Solid colors - The original single-color fill, still useful for simple elements
These gradient types give font designers unprecedented control over how colors appear within glyphs. A single character can now contain complex color relationships that were previously impossible without using images or CSS hacks.
Transformations and Compositing
Beyond gradients, COLRv1 provides a full suite of transformation operations:
- Translation - Moving elements within the glyph
- Rotation - Rotating shapes around any point
- Skew - Creating italic or slanted effects
- Scale - Resizing elements proportionally
Combined with composition and blending operations defined in the W3C Compositing specification, these transformations allow glyphs to contain multiple elements that interact with each other in sophisticated ways. A star shape, for example, can be reused at different sizes and positions within a single glyph without duplicating the underlying shape data.
Shape Reuse for Compact Files
One of COLRv1's most significant advantages is its ability to reuse internal shapes. When multiple glyphs share common elements, COLRv1 stores that shape once and references it multiple times. This dramatically reduces file size compared to approaches that duplicate shape data.
The Chrome team demonstrated this with an example crystal ball emoji where star-shaped reflections appear at different sizes. Rather than storing separate star definitions for each size, COLRv1 stores one star and references it with different transformations. This optimization makes COLRv1 particularly efficient for fonts with many similar elements.
The compression benefits are substantial. The Chrome team reported that a test build of Twemoji in COLRv1 format occupies approximately 1.2MB uncompressed but compresses to around 0.6MB with WOFF2. Even more impressively, the complete Noto Emoji font reduced from 9MB (bitmap-based format) to 1.85MB when converted to COLRv1 with WOFF2 compression.
This efficiency makes color fonts practical for web use where performance optimization directly impacts loading performance and user experience.
CSS Font-Palette: Controlling Font Colors
While COLRv1 enables rich color capabilities within font files, CSS font-palette gives developers control over how those colors are used. The font-palette property allows authors to select from predefined palettes within a color font or create custom palettes using the @font-palette-values at-rule.
Using Predefined Palettes
Many color fonts include multiple predefined color palettes. The font-palette property lets you select which palette to use:
/* Use a specific palette by name */
.font-with-palettes {
font-family: "Bungee Spice";
font-palette: --warm-colors;
}
/* Use the light variant of a palette */
.another-font {
font-family: "Noto Color Emoji";
font-palette: --light;
}
This approach works when fonts include multiple curated palettes designed to work together as complete color schemes.
Creating Custom Palettes with @font-palette-values
For greater control, the @font-palette-values at-rule allows you to define custom palettes that override specific colors in a font's default palette:
/* Define a custom palette that overrides specific color indices */
@font-palette-values --brand-blue {
font-family: "Bungee Spice";
base-palette: --original;
override-colors:
0 #0056b3,
2 #00aaff,
4 #003366;
}
.custom-palette {
font-family: "Bungee Spice";
font-palette: --brand-blue;
}
This approach is powerful because it allows designers to adapt color fonts to match brand guidelines without requiring custom font versions. You simply map the font's internal color slots to your preferred colors. For organizations implementing advanced visual features like color typography, AI-powered design systems can help automate and scale these customizations across digital touchpoints.
How Color Indices Work
Color fonts organize their colors into numbered slots, and understanding these slots is key to effective palette customization. When you inspect a color font, you'll find that each glyph uses specific color indices for its various elements. By overriding those indices with your preferred colors, you change how those elements appear.
For example, a decorative font might use color slot 0 for primary elements, slot 1 for shadows, and slot 2 for highlights. By creating a custom palette that changes slot 1 from gray to a brand color, you can make the shadow elements match your design system.
The base-palette property specifies which of the font's built-in palettes to use as a starting point, and override-colors lists which specific color indices to replace. Color indices are defined by the font and typically start at 0.
Browser Support
Understanding browser support is crucial for making informed decisions about using COLRv1 and font-palette in production:
- Chrome and Edge: Full support starting with version 98 (February 2022)
- Firefox: Full support without feature flags
- Safari: No native COLRv1 support as of early 2025
This browser landscape means that a significant portion of users can enjoy color fonts today, but Safari users cannot. For production use, consider progressive enhancement strategies that provide graceful fallbacks.
Feature Detection
The Chrome team has been working on standardized feature detection for color font formats. Until browser support improves, the community has developed workarounds:
- User-agent detection - Check browser type and version to determine support
- Canvas rendering tests - Use libraries like ChromaCheck to test actual color font rendering
The Canvas-based approach involves rendering a color font glyph to an off-screen canvas and checking whether the rendered pixels contain color data. This method is accurate but adds complexity and computational overhead.
Progressive Enhancement Strategy
For production websites, a progressive enhancement approach works well:
- Load a font that includes both color glyphs and monochrome fallbacks
- Non-supporting browsers render the monochrome version
- Supporting browsers render the full color experience
- Optionally use JavaScript detection to conditionally load COLRv1-specific fonts
This approach ensures readable text across all browsers while providing enhanced visuals where supported.
Use Cases for Color Typography
Emoji Fonts
Perhaps the most obvious use case for COLRv1 is emoji rendering. Currently, most platforms handle emojis through system emoji fonts or by replacing text emojis with images. Image replacement adds complexity for developers and can break clipboard operations.
COLRv1 offers a cleaner solution:
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji');
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
With a properly configured emoji font, text containing emojis renders correctly without image replacement. The font's compact size makes it practical for web use.
Icon Fonts with Color
Icon systems like Material Icons benefit from color support. Two-tone icons that use a primary color for the fill and a secondary color for outlines become clearer and more consistent when the color relationships are baked into the font.
Artistic Typography
Color fonts enable creative expression that goes beyond traditional typography. The Reem Kufi Ink font demonstrates how gradients can interpret traditional calligraphy styles in new ways--using color flow to suggest ink movement even though the original kufic script was carved in stone, not written with ink.
Variable Font Integration
COLRv1 builds on OpenType variable font technology, meaning color effects can combine with weight, width, and other variation axes. This combination enables animated color effects, responsive typography that changes color based on viewport size, and sophisticated design systems.
Creating COLRv1 Fonts
For developers who want to create their own color fonts, several tools are available:
nanoemoji Compiler
Google's nanoemoji project is an open-source compiler that converts SVG images into COLRv1 fonts. It handles the complexity of converting vector graphics into the OpenType format, allowing designers to work in familiar tools before compiling to font format.
The toolchain supports:
- SVG source files with color information
- Gradient definitions
- Shape reuse and transformation
- Output as valid COLRv1 OpenType fonts
Google Fonts Color Repository
The Google Fonts color-fonts repository on GitHub contains example fonts built with COLRv1, including:
- Noto Color Emoji - Full emoji set
- Twemoji - Twitter's emoji design
- Various experimental color fonts
These examples serve as both inspiration and reference implementations for developers learning the format.
Bungee Spice Customization
The Bungee Spice font provides an accessible starting point for customization. Google has published instructions for creating modified versions with different gradient colors, allowing developers to experiment without building fonts from scratch.
Implementation Best Practices
Font Selection
When choosing color fonts for production use, consider:
- File size - COLRv1 fonts compress well, but verify sizes meet your performance budgets
- Glyph coverage - Ensure the font includes characters for your target languages
- Palette flexibility - Fonts with multiple palettes or well-organized color indices offer more customization options
- Fallback strategy - Verify fonts render acceptably when color features are unavailable
Performance Considerations
- Use WOFF2 compression for all font formats, including COLRv1
- Subset fonts to include only needed characters for your use case
- Preload critical fonts to prevent layout shifts
- Consider system font fallbacks for non-essential decorative uses
Accessibility
Color in typography should enhance rather than replace readability:
- Ensure sufficient contrast between foreground and background
- Don't rely solely on color to convey meaning
- Test with color blindness simulators
- Provide alternatives for users who disable fonts
Implementing advanced typography features like COLRv1 requires a solid foundation in modern web development practices. Our team can help you integrate color typography into your web projects while maintaining optimal performance and accessibility standards.