Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

Значения свойства font-palette

  • normal — использовать первую палитру (по умолчанию).
  • light или dark — выбрать палитры для светлого/тёмного фона, если они определены в шрифте; иначе normal.
  • --myPalette — идентификатор собственной палитры, определённой правилом @font-palette-values.
  • palette-mix(...) — функция для смешивания двух палитр с указанием метода и процентного соотношения.

Пример использования

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

Как определять собственные палитры

Для этого используется правило @font-palette-values:

@font-palette-values --alt {
  font-family: "Bungee Spice";
  base-palette: 2;
  override-colors: 0 #00ffbb, 1 #007744;
}

.heading {
  font-family: "Bungee Spice";
  font-palette: --alt;
}
  • font-family задаёт, к какому шрифту применяется палитра.
  • base-palette выбирает подмножество (по индексу или ключу light/dark).
  • override-colors даёт возможность заменить отдельные цвета в палитре.

Смешивание палитр:

palette-mix() позволяет плавно смешивать две палитры:

font-palette: palette-mix(in lch, --blueTheme 60%, --yellowTheme 40%);

Можно настраивать цветовое пространство (lch, srgb, hsl и др.) и то, в каком процентном соотношении смешиваются палитры.

Важно отметить, что функция пока частично экспериментальна и может не работать во всех браузерах.

Итого

  • Что: font-palette — управление цветами цветных шрифтов напрямую через CSS.
  • Когда: полностью доступно в браузерах с мая 2025.
  • Зачем: применять тематические, светлые/тёмные и брендированные палитры.
  • Как:
    1. Выбрать встроенную палитру (normal, light, dark).
    2. Объявить свою через @font-palette-values.
    3. Применить font-palette или смешать с palette-mix().