Bradley Initials DJR Color Fonts

Bradley Initials DJR COLRv1 Beta

COLRv1 is a promising new standard for color fonts that allows for SVG-like features such as gradients but using glyph data instead of embedded images. This reduces the bulky filesize of an OpenType SVG font, and opens the possibility of gradients in variable color fonts.

As of this writing, COLR v1 is supported in Chrome Canary when chrome://flags/#colr-v1-fonts is enabled. More instructions and information are in the Gradients for COLR/CPAL Fonts specification.

COLRv1, Default Palette

Lorem ipsum

COLRv1, Black and White

Lorem ipsum

COLRv1, Royal Purple

Lorem ipsum

COLRv1, Bumble Bee

Lorem ipsum

COLRv1, Classic Red

Lorem ipsum

COLRv1, Lilac Blossom

Lorem ipsum

COLRv1, Seafoam

Lorem ipsum

Bradley Initials DJR COLRv0

COLR v0, Default Palette

Lorem ipsum

COLR v0, Black and White

Lorem ipsum

COLR v0, Royal Purple

Lorem ipsum

COLR v0, Bumble Bee

Lorem ipsum

COLR v0, Classic Red

Lorem ipsum

COLR v0, Lilac Blossom

Lorem ipsum

COLR v0, Seafoam

Lorem ipsum

Bradley Initials DJR (COLR v0) using CSS @font-palette

CSS font-palette allows you to modify a color font’s palette using CSS. As of this writing, it is supported by the Safari Technology Preview.

Lorem ipsum 

@font-palette-values --MyPalette {
    font-family: "Bradley Initials DJR Web";
    base-palette: 3;
}

Bradley Initials DJR (COLR v0) using CSS override-colors

Lorem ipsum 

@font-palette-values --MyOverridePalette {
    font-family: "Bradley Initials DJR Web";
    override-colors: 0 yellow;
}