Nupuram Color is the color font variant of Nupuram, implemented with COLRv1. It uses three color layers — Dark, Light, and Base — to create a shadow effect with an internal gradient. The Base color is the facing color, Light is the central glowing area, and Dark is the shadow. These colors can be customized by users.
Nupuram Color is also a variable font. The Weight axis changes the offset along the z‑axis, controlling the shadow depth (range 100 to 900). A COLRv0 variant is also available for legacy applications.
Variation axis
| Axis | Tag | Range | Description |
|---|---|---|---|
| Weight | wght | 100–900, default 400 | Controls z‑axis offset (shadow depth). Thin = subtle shadow, Black = deep shadow. |
Color palettes
There are 19 predefined palettes (0–18) built into the font. You can select a palette or override colors via CSS using
@font-palette-values. Browser support for COLRv1 varies; see
colorfonts.wtf and
Chrome's COLRv1 announcement for details.
To create a font with custom colors, try DJR's Color Font Customizer. Experiment with palettes and variations in the Nupuram playground.
CSS examples
/* Use a predefined palette */
.content {
font-family: 'Nupuram Color';
font-palette: --pal-5;
}
/* Or override colors directly */
@font-palette-values --custom {
font-family: 'Nupuram Color';
base-palette: 0;
override-colors: 0 #FFD700, 1 #FFD700, 2 #1E0303;
}