Reference/At-rules/@font-palette-values

김동현·2026년 3월 28일

CSS docs

mdn 학습 번역 - CSS

목록 보기

176/190

@font-palette-values

Baseline | Widely available

Chrome, Edge, Firefox, Safari에서 지원돼요.

이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2022년 11월부터 모든 브라우저에서 사용 가능했어요.

@font-palette-values CSS at-rule을 사용하면 폰트 제작자가 만든 font-palette의 기본값을 커스터마이징할 수 있어요.

요즘은 폰트 자체에 색상이 입혀진 '컬러 폰트'들이 등장하고 있는데요, 이 규칙을 사용하면 폰트 디자이너가 정해둔 기본 색상을 내 웹사이트 디자인에 맞춰서 살짝 바꾸거나 아예 새롭게 정의할 수 있어요. 자, 자세히 알아볼까요?

구문 (Syntax)

@font-palette-values --identifier {
  font-family: "Bixa";
}

.my-class {
  font-palette: --identifier;
}

여기서 사용하는 <dashed-ident>는 사용자가 직접 정의하는 이름이에요. 이름 앞에 대시 두 개(--)가 붙어서 CSS 커스텀 프로퍼티(변수)처럼 보일 수 있지만, 실제로는 다르게 작동한답니다. 가장 큰 차이점은 CSS var() 함수 안에 감싸서 사용하지 않는다는 점이에요!

디스크립터 (Descriptors)

base-palette

폰트 제작자가 미리 만들어둔 기본 팔레트 중에서 어떤 것을 사용할지 이름이나 인덱스 번호로 지정해요.

font-family

이 팔레트를 적용할 폰트 패밀리의 이름을 지정해요. @font-palette-values 규칙이 올바르게 작동하려면 font-family 이름은 반드시 써주어야 하는 필수 항목입니다.

override-colors

기본 팔레트의 색상 중에서 덮어쓰고 싶은(바꾸고 싶은) 색상들을 지정해요.

형식적인 구문 (Formal syntax)

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }

이 구문은 CSS Fonts Module Level 4의 최신 표준을 따르고 있어요. 브라우저마다 구현 정도가 다를 수 있으니, 브라우저 호환성 정보를 꼭 확인하세요.

예제 (Examples)

기존 팔레트의 색상 덮어쓰기 (Overriding colors in an existing palette)

컬러 폰트의 색상을 일부만 바꾸거나 전체를 다 바꾸는 방법을 예제를 통해 보여드릴게요.

HTML

<p>기본 색상 (default colors)</p>
<p class="alternate">변경된 색상 (alternate colors)</p>

CSS

/* Google Fonts에서 컬러 폰트인 "Bungee Spice"를 불러옵니다 */
@import url("[https://fonts.googleapis.com/css2?family=Bungee+Spice](https://fonts.googleapis.com/css2?family=Bungee+Spice)");

p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}

/* --Alternate라는 이름으로 새로운 팔레트 값을 정의해요 */
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  /* 0번과 1번 인덱스의 색상을 내가 원하는 색으로 바꿉니다 */
  override-colors:
    0 #00ffbb,
    1 #007744;
}

.alternate {
  /* 정의한 팔레트를 적용해요 */
  font-palette: --Alternate;
}

결과 (Result)

인덱스 0번에 해당하는 일반(normal) 또는 기본 팔레트의 색상을 덮어쓸 때는 어떤 기본 팔레트를 사용할지 따로 선언할 필요가 없어요. base-palette는 기본이 아닌 다른 팔레트를 덮어쓸 때만 사용하면 됩니다. 또한 모든 색상을 다 바꿀 때도 굳이 기본 팔레트를 지정할 필요가 없답니다.

MDN Playground에서 예제 실행하기

이 기능은 브랜드 컬러에 맞춰 폰트 색상을 세밀하게 조정하고 싶을 때 정말 유용하게 쓰일 수 있어요. 컬러 폰트를 더 감각적으로 다루고 싶은 후배님들에게 강력 추천하는 기술입니다!

공식문서에 대한 추가적인 설명

1. '컬러 폰트(Color Font)'가 대체 뭔가요?

우리가 평소에 쓰는 일반 폰트(예: 굴림, Arial)는 '모양(실루엣)'만 있는 투명한 도장이라고 생각하시면 돼요. 그래서 CSS에서 color: red; 라고 지정해 줘야 비로소 빨간색 글자가 나타나죠.

반면 컬러 폰트는 폰트 파일 자체에 색상, 그라데이션, 심지어 텍스처까지 이미 내장되어 있는 폰트입니다.

가장 완벽한 예시가 바로 우리가 매일 쓰는 이모지(Emoji 🍎🚀😀)입니다! 이모지도 사실은 이미지 파일이 아니라 '컬러 폰트'의 일종이에요. 최근에는 이 기술이 발전해서 이모지뿐만 아니라 일반 영어 알파벳이나 글자에도 화려한 색상과 그라데이션을 겹겹이 쌓아 넣은 텍스트용 컬러 폰트들이 등장하기 시작했어요. (대표적인 포맷: OpenType-SVG, COLRv1)

2. 그럼 `@font-palette-values`는 왜 필요한가요?

컬러 폰트가 자체적으로 예쁜 색상을 가지고 있는 건 좋은데, 치명적인 문제가 하나 생깁니다.

"이 폰트 모양은 너무 마음에 드는데, 기본 색상이 노란색이네? 우리 회사 웹사이트 메인 컬러는 파란색인데... 이 폰트 못 쓰겠네 😭"

일반 폰트라면 color: blue; 한 줄이면 끝났겠지만, 컬러 폰트는 여러 가지 색상이 겹쳐 있어서 color 속성 하나로는 색을 바꿀 수가 없어요.

이때 구세주처럼 등장하는 것이 바로 @font-palette-values 입니다!
이 규칙을 사용하면 컬러 폰트 제작자가 폰트 안에 숨겨둔 '팔레트(테마)'를 골라 쓰거나, 내 마음대로 특정 색상을 다른 색으로 덮어씌울 수(Override) 있어요.

3. 실전 예시: 영어 폰트 편 (Bungee Spice)

구글 폰트에 있는 유명한 영어 컬러 폰트인 Bungee Spice를 예로 들어볼게요. 이 폰트는 기본적으로 '노란색 글자에 빨간색 그림자'가 들어간 그라데이션 폰트입니다. 이걸 파란색 테마로 싹 바꿔볼게요.

CSS

/* 1. 먼저 구글 폰트에서 컬러 폰트를 불러옵니다 */
@import url('[https://fonts.googleapis.com/css2?family=Bungee+Spice](https://fonts.googleapis.com/css2?family=Bungee+Spice)');

/* 2. 내 맘대로 새로운 색상 팔레트를 만듭니다! 이름은 '--my-blue-theme'으로 할게요 */
@font-palette-values --my-blue-theme {
  font-family: "Bungee Spice"; /* 이 팔레트가 적용될 폰트 이름 (필수) */
  
  /* 기존 색상을 내 색상으로 덮어씁니다 (override-colors) */
  override-colors:
    0 #00ffff, /* 0번 레이어(기본 글자색)를 청록색으로! */
    1 #0000ff; /* 1번 레이어(그림자색)를 진한 파란색으로! */
}

/* 3. HTML 요소에 적용하기 */
.default-text {
  font-family: "Bungee Spice", sans-serif;
  /* font-palette를 안 주면 원래 폰트가 가진 노란색/빨간색으로 나옵니다 */
}

.custom-text {
  font-family: "Bungee Spice", sans-serif;
  /* 우리가 위에서 만든 파란색 팔레트를 적용합니다! */
  font-palette: --my-blue-theme;
}

이렇게 하면 똑같은 폰트 파일 하나만 다운로드 받고도, CSS를 통해 내 웹사이트에 맞는 파란색 그라데이션 폰트로 바꿀 수 있는 겁니다!

4. 실전 예시: 한국어 폰트 편

여기서 선배로서 현실적인 팩트 체크를 하나 해드릴게요.
영어는 알파벳이 26자밖에 없어서 컬러 폰트를 만들기 쉽지만, 한글은 조합 가능한 글자 수가 무려 11,172자나 됩니다. 이 모든 글자에 색상 레이어와 그라데이션을 넣으면 폰트 용량이 수십, 수백 메가바이트(MB)가 되어서 웹에서는 도저히 쓸 수가 없어요.

그래서 현재 텍스트용 한글 컬러 폰트는 거의 존재하지 않습니다. 하지만 한국에서 가장 많이 쓰는 컬러 폰트가 있죠? 바로 토스페이스(Toss Face) 같은 이모지 폰트입니다! 또는 미래에 나올 "가상의 한글 입체 폰트"를 가정하고 코드를 작성해 볼게요.

가상의 한글 컬러 폰트 "한글 네온"이 있다고 가정해 봅시다.

이 폰트는 기본적으로 '분홍색 네온사인'으로 빛나고 있어요. 우리는 이걸 '녹색 네온사인'으로 바꾸고 싶습니다.

/* 1. 한글 네온 폰트의 팔레트를 새로 정의합니다 */
@font-palette-values --green-neon {
  font-family: "Hangul Neon"; /* 가상의 한글 컬러 폰트 */
  
  /* base-palette: 폰트 디자이너가 미리 만들어둔 테마를 고를 수도 있어요! */
  /* 만약 디자이너가 1번에 '다크모드용 테마'를 만들어뒀다면 아래처럼 부르면 됩니다. */
  /* base-palette: 1; */

  /* 우리는 직접 색을 바꿀 거니까 override를 씁니다 */
  override-colors:
    0 #ffffff, /* 글자 중심부는 하얀색으로 */
    1 #00ff00; /* 네온 빛 번짐 레이어는 형광 녹색으로! */
}

.title-kor {
  font-family: "Hangul Neon", sans-serif;
  /* 한글 글자가 분홍색 대신 멋진 녹색 네온사인으로 빛나게 됩니다 */
  font-palette: --green-neon; 
}

5. 핵심 정리 (이것만 기억하세요!)

컬러 폰트: 폰트 안에 이미 색상과 디테일한 디자인(그라데이션, 그림자 등)이 저장된 폰트. (예: 이모지, Bungee Spice)
문제점: CSS의 color 속성으로는 이 디테일한 색상들을 바꿀 수 없음.
해결책 (@font-palette-values):
- 폰트에 내장된 여러 색상 레이어(0번, 1번, 2번...)에 접근해서,
- 내가 원하는 색으로 덮어쓰기(override-colors)를 하거나,
- 폰트 제작자가 미리 만들어둔 다른 컬러 테마(base-palette)를 골라 쓸 수 있게 해주는 CSS 규칙!

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Reference/At-rules/@font-feature-values

다음 포스트

Reference/At-rules/@font-palette-values

mdn 학습 번역 - CSS

@font-palette-values

구문 (Syntax)

디스크립터 (Descriptors)

형식적인 구문 (Formal syntax)

예제 (Examples)

기존 팔레트의 색상 덮어쓰기 (Overriding colors in an existing palette)

HTML

CSS

결과 (Result)

공식문서에 대한 추가적인 설명

1. '컬러 폰트(Color Font)'가 대체 뭔가요?

2. 그럼 `@font-palette-values`는 왜 필요한가요?

3. 실전 예시: 영어 폰트 편 (Bungee Spice)

CSS

4. 실전 예시: 한국어 폰트 편

가상의 한글 컬러 폰트 "한글 네온"이 있다고 가정해 봅시다.

5. 핵심 정리 (이것만 기억하세요!)

Reference/At-rules/@font-feature-values

Reference/At-rules/@import

0개의 댓글

Reference/At-rules/@font-palette-values

mdn 학습 번역 - CSS

@font-palette-values

구문 (Syntax)

디스크립터 (Descriptors)

형식적인 구문 (Formal syntax)

예제 (Examples)

기존 팔레트의 색상 덮어쓰기 (Overriding colors in an existing palette)

HTML

CSS

결과 (Result)

공식문서에 대한 추가적인 설명

1. '컬러 폰트(Color Font)'가 대체 뭔가요?

2. 그럼 @font-palette-values는 왜 필요한가요?

3. 실전 예시: 영어 폰트 편 (Bungee Spice)

CSS

4. 실전 예시: 한국어 폰트 편

가상의 한글 컬러 폰트 "한글 네온"이 있다고 가정해 봅시다.

5. 핵심 정리 (이것만 기억하세요!)

Reference/At-rules/@font-feature-values

Reference/At-rules/@import

0개의 댓글

2. 그럼 `@font-palette-values`는 왜 필요한가요?