CSSの font-palette は、カラーフォント（1つの文字に複数の色を持つフォント）の配色を、フォントに収録されたパレットから選んだり、@font-palette-values で色を差し替えたりするためのプロパティです。通常の単色フォントの文字色を変える機能ではない点が最初のつまずきどころで、単色フォントの色は従来どおり color で指定します。この記事では、仕組みと書き方、WordPressテーマへのフォント登録、ブロックスタイルとしてエディターから選べるようにする方法、確認とつまずきやすい点を解説します。
font-paletteで何ができるか
カラーフォントには、文字の形と一緒に「どの部分を何色で塗るか」という情報が入っています。色そのものはCPALと呼ばれるテーブルに「パレット」としてまとめられ、フォントによっては複数のパレットを持っています。font-palette は、このパレットを切り替えたり、パレット内の特定の色だけを上書きしたりするものです。
できることは大きく3つです。
- フォントに収録された別のパレットに切り替える:
@font-palette-valuesのbase-paletteで番号を指定する - パレットの一部の色を差し替える:
override-colorsで、パレット内の色番号ごとに別の色を指定する - 明るい背景・暗い背景向けのパレットを選ぶ:
font-palette: light/darkで、フォントが明暗用として指定しているパレットを使う
単色フォントにはパレットがないため、font-palette を指定しても何も変わりません。見出しをブランドカラーにしたいだけなら color で十分です。font-palette が役に立つのは、ロゴ風の見出しや装飾的なタイトルにカラーフォントを使い、その配色をサイトのデザインに合わせたい場面です。
ブラウザの対応状況
font-palette と @font-palette-values は、Chrome・Edge 101以降、Firefox 107以降、Safari 15.4以降で使えます（2026年10月現在）。主要ブラウザで対応がそろってから時間が経っているため、プロパティ自体の対応は広く行き渡っています。
注意が必要なのは、カラーフォントの「形式」の対応です。カラーフォントにはCOLRv0、COLRv1、OpenType-SVGなどの形式があり、ブラウザによって対応する形式が異なります。特にCOLRv1はSafariでの対応が遅れており、COLRv1のフォントはSafariでは単色の代替表示になることがあります。使うフォントの形式を確認し、Safariでの見え方も実機で確かめてください。未対応の環境でも文字は代替の形で表示されるため、読めなくなる心配は小さく、装飾が単色になる程度で済みます。
基本の書き方
@font-palette-values で独自のパレットを定義し、font-palette でそのパレット名を指定します。パレット名は -- で始まる名前にします。
/* フォントに収録された番号1（0から数えるので2つ目）のパレットを土台にし、
色番号0と1だけをサイトの色に差し替える */
@font-palette-values --brand {
font-family: "Nabla";
base-palette: 1;
override-colors:
0 #0073aa,
1 #f5a623;
}
.title-color-font {
font-family: "Nabla", sans-serif;
font-palette: --brand;
}ここでつまずきやすいのは次の2点です。
- **
font-familyの名前**:@font-palette-valuesの中のfont-familyは、@font-faceで登録したファミリー名と一致している必要があります。一致しないと、パレットが適用されずフォント本来の色で表示されます - 色番号の意味:
override-colorsの番号は、パレット内の何番目の色かを表します。どの番号が文字のどの部分に使われているかはフォントごとに違うため、フォントの配布ページやフォント情報を確認できるツールで調べます
パレットの数や色番号の内容は、フォントファイルの情報を表示するWebツールや、Pythonのfonttoolsに含まれる ttx コマンドで確認できます。
# CPALテーブル（パレット情報）だけを書き出して確認する
pip install fonttools
ttx -t CPAL Nabla-Regular.ttf書き出されたファイルには、パレットごとに色の一覧が並んでいます。番号を変えては表示を確かめる、という試行で調整するのが現実的です。
WordPressテーマに組み込む
フォントをtheme.jsonで登録する
ブロックテーマでは、フォントファイルをテーマ内に置き、theme.jsonの fontFamilies と fontFace で登録すると、WordPressが @font-face を出力してくれます。外部のフォント配信サービスを読み込むより、テーマ内に置くほうが表示の確認やキャッシュの管理がしやすくなります。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Nabla",
"slug": "nabla",
"fontFamily": "\"Nabla\", sans-serif",
"fontFace": [
{
"fontFamily": "Nabla",
"fontStyle": "normal",
"fontWeight": "400",
"fontDisplay": "swap",
"src": [ "file:./assets/fonts/Nabla-Regular.woff2" ]
}
]
}
]
}
}
}fontFace の fontFamily に書いた「Nabla」が、@font-palette-values で指定するファミリー名になります。フォントのライセンスがWebでの配布とテーマへの同梱を許可しているかは、事前に確認してください。
パレットをブロックスタイルとして選べるようにする
見出しブロックに独自のスタイルを追加すると、編集者が「スタイル」パネルからカラーフォントの配色を選べるようになります。register_block_style() で登録したスタイルは、is-style-{name} というクラスとしてブロックに付きます。
<?php
// functions.php
add_action( 'init', function () {
register_block_style(
'core/heading',
array(
'name' => 'color-font-brand',
'label' => 'カラーフォント（ブランド配色）',
)
);
} );
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'mytheme-font-palette',
get_theme_file_uri( 'assets/css/font-palette.css' ),
array(),
wp_get_theme()->get( 'Version' )
);
} );
add_action( 'after_setup_theme', function () {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/font-palette.css' );
} );/* assets/css/font-palette.css */
@font-palette-values --brand-light {
font-family: "Nabla";
override-colors: 0 #0073aa, 1 #f5a623;
}
@font-palette-values --brand-dark {
font-family: "Nabla";
override-colors: 0 #7cc4ec, 1 #ffd27a;
}
.is-style-color-font-brand {
font-family: var(--wp--preset--font-family--nabla);
font-palette: --brand-light;
}
@media (prefers-color-scheme: dark) {
.is-style-color-font-brand {
font-palette: --brand-dark;
}
}theme.jsonで登録したフォントは --wp--preset--font-family--{slug} というCSS変数で参照できます。同じCSSをエディターにも読み込んでいるため、編集画面でも公開ページと同じ配色で確認できます。ダークモードの例のように、メディアクエリと組み合わせて背景に合わせた配色に切り替えるのも、font-palette の得意な使い方です。
つまずきやすい点
- 日本語の文字には効かないことが多い: 多くのカラーフォントは英数字だけを収録しています。日本語の見出しに指定すると、日本語部分は次に指定したフォントで単色表示になります。英字のロゴやキャッチコピーに絞って使うのが現実的です
- ファイルサイズ: カラーフォントは通常のフォントより大きくなりがちです。WOFF2形式を使い、使う文字が限られるならサブセット化を検討します。読み込み中に文字が消えないよう、
fontDisplayはswapにしておくと安心です - light / dark が効かない:
font-palette: lightやdarkは、フォントが明暗用のパレットを指定している場合にだけ意味があります。指定がないフォントでは変化しないため、明暗で配色を変えたいときは先の例のように独自パレットを定義します - JavaScriptでの切り替え: 配色をボタンで切り替えたい場合も、パレット自体はCSSに定義しておき、JavaScriptではクラスの付け外しだけを行うと管理しやすくなります
動作を確認する
開発者ツールで見出しを選び、「Computed（計算済み）」で font-palette の値が指定どおりか、「Fonts」や「Rendered Fonts」の表示で実際にカラーフォントが使われているかを確認します。フォントが読み込めていない場合は、theme.jsonの src のパスと、ブラウザのNetworkパネルでフォントファイルが200で返っているかを確かめてください。あわせて、Chrome・Firefox・Safariの3つで配色の見え方を比べておくと、形式の対応差による表示の違いに気づけます。
まとめ
font-paletteはカラーフォントの配色を切り替えるプロパティで、単色フォントの文字色は従来どおりcolorで指定する@font-palette-valuesのbase-paletteで収録パレットを選び、override-colorsで色番号ごとに差し替える。font-family名の一致に注意する- 2026年10月現在、主要ブラウザがプロパティに対応。ただしCOLRv1などフォント形式の対応差があるためSafariでの表示を確認する
- WordPressでは、theme.jsonでフォントを登録し、
register_block_style()でエディターから選べる配色にすると運用しやすい - 日本語には効かないことが多く、ファイルサイズも大きくなりやすいため、英字の装飾的な見出しに絞って使う