@font-palette-values: mehrfarbige Schriften mit eigenen Paletten stylen

1. Was Color Fonts sind: COLRv1, SVG-in-OpenType, sbix und CBDT im Überblick

Eine normale Schriftart speichert jede Glyphe als einfarbige Umrisslinie, deren tatsächliche Farbe erst über die color-Property im CSS bestimmt wird. Color Fonts durchbrechen dieses Prinzip: Sie speichern für jede Glyphe mehrere übereinanderliegende Farbschichten direkt in der Schriftdatei, sodass ein einzelnes Emoji-Zeichen oder ein Icon-Glyph aus mehreren farbigen Ebenen besteht, die der Browser beim Rendern zusammensetzt, ganz ohne zusätzliche Bilddateien oder SVG-Sprites.

Für diese mehrfarbige Darstellung existieren mehrere konkurrierende Formate innerhalb des OpenType-Standards: COLRv0 speichert einfache, flächige Farbschichten mit fester Palette, COLRv1 erweitert das um Farbverläufe, Transparenz und Verschachtelung von Formen. SVG-in-OpenType bettet vollständige SVG-Dokumente pro Glyphe ein, sbix und CBDT speichern stattdessen fertige Bitmap-Grafiken pro Glyphe und Größe. Für CSS-seitige Farbanpassung ist ausschließlich COLRv1 relevant, weil nur dieses Format eine vom Browser änderbare Palette definiert.

2. @font-palette-values Syntax: font-family, base-palette und override-colors

Die @font-palette-values-Regel definiert einen benannten Palette-Satz, der mit einem beliebigen, mit zwei Bindestrichen beginnenden Namen referenziert wird, ähnlich einer Custom Property. Innerhalb des Blocks legt font-family fest, für welche Schriftart die Palette gilt, base-palette wählt eine der in der Schriftdatei bereits vordefinierten Paletten als Ausgangspunkt, meist über einen Index wie 0 oder 1, den die jeweilige Foundry dokumentiert.

override-colors überschreibt anschließend gezielt einzelne Farbindizes dieser Basis-Palette mit eigenen Farbwerten, während alle nicht genannten Indizes ihre ursprüngliche Farbe aus der base-palette behalten. Diese Kombination erlaubt, nur die Akzentfarbe eines Icon-Sets anzupassen, ohne die gesamte Palette neu definieren zu müssen, was besonders bei Fonts mit vielen Farbschichten pro Glyphe den Aufwand deutlich reduziert.

@font-palette-values --brand-icons {
  font-family: "Color Icons";
  base-palette: 0;
  override-colors:
    0 #4a1d96,
    1 #7c3aed,
    2 #c4b5fd;
}

3. Eigene Paletten definieren: override-colors und das Herausfinden der Farbindizes

Jede Farbschicht innerhalb einer COLRv1-Glyphe ist intern einem numerischen Index zugeordnet, den die Schriftdatei selbst vorgibt und der zwischen verschiedenen Color Fonts unterschiedlich sein kann. Ohne Dokumentation der Foundry lässt sich dieser Index am zuverlässigsten über ein Font-Inspektions-Werkzeug herausfinden, das die eingebetteten Paletten einer Schriftdatei tabellarisch auflistet und jeder Farbe ihren Index zuordnet.

Beim Setzen von override-colors ist wichtig, dass jede Zeile aus Index und Farbwert besteht, getrennt durch ein Leerzeichen, und mehrere Overrides durch Kommas getrennt werden. Wird ein Index angegeben, der in der Schriftdatei gar nicht existiert, ignoriert der Browser diesen einzelnen Eintrag, ohne die restliche Palette zu beeinträchtigen, was das Debuggen einzelner Farbzuweisungen deutlich erleichtert gegenüber einem kompletten Fehlschlagen der Regel.

/* Nur zwei von fuenf Farbschichten anpassen,
   Rest der Palette bleibt beim Font-Original. */
@font-palette-values --muted-icons {
  font-family: "Color Icons";
  base-palette: 0;
  override-colors:
    2 #94a3b8,
    4 #475569;
}

4. font-palette Property anwenden: Verknüpfung mit @font-palette-values

Definiert ist die Palette erst der halbe Weg, aktiviert wird sie über die font-palette-Property auf dem eigentlichen Text-Element, unter Angabe desselben Namens, der in der @font-palette-values-Regel verwendet wurde. Ohne diese Zuweisung bleibt ein Element bei der base-palette der Schriftdatei, unabhängig davon, wie viele @font-palette-values-Regeln im Stylesheet definiert sind.

Mehrere unterschiedliche @font-palette-values-Blöcke lassen sich parallel für dieselbe Schriftart definieren, etwa eine für den Hell-Modus und eine für den Dunkel-Modus, und je nach Kontext über unterschiedliche Selektoren zuweisen. Das macht font-palette zu einem eigenständigen, gezielt steuerbaren Theming-Mechanismus, unabhängig von der normalen color-Property, die bei Color Fonts ohnehin keine Wirkung mehr auf die eingebetteten Farbschichten hat.

.icon {
  font-family: "Color Icons";
  font-palette: --brand-icons;
}

.icon--muted {
  font-palette: --muted-icons;
}

5. Praktisches Rezept: ein mehrfarbiges Icon-Font mit zwei Themen-Paletten

Für ein Icon-Set mit zwei Themen-Varianten definiert man zwei @font-palette-values-Blöcke mit identischer base-palette, aber unterschiedlichen override-colors-Werten, einmal auf die Markenfarben für den Hell-Modus abgestimmt, einmal auf entsprechend angepasste, kontraststarke Töne für den Dunkel-Modus. Beide Blöcke lassen sich vollständig unabhängig vom übrigen Farbschema der Seite pflegen, weil sie ausschließlich die Icon-Glyphen betreffen.

Die Zuweisung der passenden Palette geschieht dann über einen einzigen Selektor-Wechsel, etwa gekoppelt an eine Theme-Klasse am html-Element, wodurch sich sämtliche Icons auf der Seite gleichzeitig umfärben, ohne jede Icon-Instanz einzeln anzupassen. Dieses Muster skaliert deutlich besser als getrennte SVG-Dateien pro Farbvariante, weil nur eine einzige Schriftdatei geladen werden muss, unabhängig von der Anzahl der Themes.

@font-palette-values --icons-light {
  font-family: "Color Icons";
  base-palette: 0;
  override-colors: 0 #4a1d96, 1 #7c3aed;
}

@font-palette-values --icons-dark {
  font-family: "Color Icons";
  base-palette: 0;
  override-colors: 0 #c4b5fd, 1 #ede9fe;
}

.icon {
  font-family: "Color Icons";
  font-palette: --icons-light;
}

html.theme-dark .icon {
  font-palette: --icons-dark;
}

6. Browser-Support: welche Engines COLRv1 unterstützen und wie man es prüft

COLRv1 und die zugehörigen CSS-Properties font-palette und @font-palette-values sind mittlerweile in allen großen Rendering-Engines implementiert, wobei sich der Reifegrad der Umsetzung, insbesondere bei komplexen Farbverläufen und Verschachtelungen innerhalb einer Glyphe, zwischen den Engines noch unterscheiden kann. Vor dem produktiven Einsatz lohnt sich ein visueller Test in allen relevanten Zielbrowsern, insbesondere wenn die Schriftart Farbverläufe statt einfacher Flächenfarben nutzt.

Für die Feature-Erkennung im Code eignet sich @supports font-palette: --test-name, das prüft, ob der Browser die Syntax der font-palette-Property grundsätzlich versteht. Wichtig ist der Unterschied zwischen Syntax-Support und tatsächlicher COLRv1-Darstellung: Ein Browser kann die Property syntaktisch akzeptieren, aber die eingebettete Farbschicht dennoch nicht vollständig rendern, wenn die Schriftdatei fortgeschrittene COLRv1-Features wie Verläufe nutzt, die dieser Browser noch nicht vollständig umsetzt.

7. Fallback-Strategie für einfarbige Fonts: wie die normale color-Property greift

Wird font-palette auf eine Schriftart angewendet, die gar keine COLRv1-Farbschichten enthält, oder unterstützt der Browser das Feature nicht, ignoriert der Renderer die Property vollständig und fällt auf das reguläre, einfarbige Rendering zurück. In diesem Fall greift die normale color-Property wieder wie gewohnt, sodass ein Icon-Font mit Color-Font-Vorteil bei fehlender Unterstützung nicht unsichtbar wird, sondern lediglich einfarbig in der per color definierten Farbe erscheint.

Dieses fehlertolerante Verhalten erlaubt, font-palette produktiv einzusetzen, ohne eine separate einfarbige Fallback-Schriftart vorhalten zu müssen, solange die eingesetzte Schriftdatei selbst einen sinnvollen Ein-Farb-Fallback über ihre eigenen Metadaten definiert, was die meisten kommerziellen Color Fonts standardmäßig tun. Wichtig bleibt trotzdem, color explizit zu setzen, damit die einfarbige Fallback-Darstellung zum restlichen Farbschema der Seite passt, statt der Foundry-Standardfarbe zu folgen.

8. Performance-Aspekte: Dateigröße von Color Fonts im Vergleich zu SVG-Icons

Eine COLRv1-Schriftdatei mit mehreren hundert mehrfarbigen Glyphen kann größer sein als ein vergleichbares SVG-Sprite mit ausschließlich einfarbigen Icons, weil zusätzliche Farbschicht-Tabellen und, bei Verläufen, weitere Metadaten pro Glyphe mitgespeichert werden müssen. Sobald eine Seite jedoch viele unterschiedliche Icons in mehreren Farbvarianten braucht, kehrt sich der Größenvergleich oft um, weil eine einzige Color-Font-Datei mehrere SVG-Dateien mit redundanten Umrissen pro Farbvariante ersetzt.

Ein zusätzlicher Performance-Vorteil von Color Fonts gegenüber mehreren SVG-Varianten ist das Caching-Verhalten: Die Schriftdatei wird einmal geladen und vom Browser wie jede andere Web-Font zwischengespeichert, während für jede zusätzliche Farbvariante bei SVG-Sprites im schlechtesten Fall eine eigene Datei oder ein größeres, kombiniertes Sprite geladen werden müsste. Für Icon-lastige Interfaces mit mehreren Themes ist dieser Cache-Effekt oft der entscheidende Vorteil.

9. Kombination mit prefers-color-scheme für automatischen Palettenwechsel

font-palette lässt sich direkt innerhalb einer prefers-color-scheme-Media-Query zuweisen, sodass Icons automatisch die passende Palette für Hell- oder Dunkelmodus verwenden, ohne dass JavaScript den Wechsel steuern muss. Sobald die Media Query greift, wechselt der Browser die Farbzuweisung der Icon-Glyphen genauso automatisch wie bei anderen CSS-Properties, weil font-palette technisch eine ganz normale, kaskadenfähige CSS-Property ist.

Für Seiten, die zusätzlich einen manuellen Theme-Umschalter anbieten, kombiniert man beide Mechanismen: prefers-color-scheme liefert die Voreinstellung nach Systemeinstellung, eine explizite Theme-Klasse am html-Element überschreibt diese bei manueller Nutzerwahl. So bleibt die Farbpalette der Icons in jedem Fall konsistent mit dem restlichen, über prefers-color-scheme oder color-scheme gesteuerten Erscheinungsbild der Seite.

.icon {
  font-family: "Color Icons";
  font-palette: --icons-light;
}

@media (prefers-color-scheme: dark) {
  .icon {
    font-palette: --icons-dark;
  }
}

/* Manuelle Nutzerwahl gewinnt gegenueber der
   Systemeinstellung */
html.theme-dark .icon {
  font-palette: --icons-dark;
}

10. Zusammenfassung

11. FAQ: @font-palette-values: Das Wichtigste auf einen Blick