Widely available 安全に使用可能。カラーフォントを使う場面で、テーマに合わせた色の切り替えに利用できる。
タイポグラフィ Widely available

font-palette

カラーフォント（COLRv1 など）には複数のカラーパレットが内蔵されていることがある。font-palette を使って既定のパレットを切り替えたり、@font-palette-values で独自のパレットを定義できる。ダークモード対応やブランドカラーへのカスタマイズに有用。

フォントカラー

概要

カラーフォント（COLRv1 など）には複数のカラーパレットが内蔵されていることがある。font-palette を使って既定のパレットを切り替えたり、@font-palette-values で独自のパレットを定義できる。ダークモード対応やブランドカラーへのカスタマイズに有用。

対応ブラウザ

デスクトップ

Chrome 101+
Edge 101+
Safari 15.4+
Firefox 107+

モバイル

Chrome Android 101+
Safari iOS 15.4+
Firefox Android 107+

基本構文

CSS 
/* 組み込みパレットを使用 */
.emoji {
  font-palette: dark;
}

/* カスタムパレット */
@font-palette-values --brand-palette {
  font-family: "MyColorFont";
  override-colors:
    0 #ff6600,
    1 #0066ff;
}

.branded {
  font-family: "MyColorFont";
  font-palette: --brand-palette;
}

実務での使いどころ

  • ダークモード対応

    ダークモード時にカラーフォントのパレットを切り替え、背景色に合った配色にする。

  • ブランドカスタマイズ

    カラーフォントの色をブランドカラーに合わせて上書きし、一貫したデザインを維持する。

注意点

  • カラーフォント自体に対応していないブラウザや環境では、単色で表示されるフォールバック動作になる。

アクセシビリティ

  • カラーフォントのパレットを変更する際は、文字と背景のコントラスト比が十分であることを確認すること。

参考リンク