Reference/At-rules/@font-face

김동현·2026년 3월 28일
CSSdocs

mdn 학습 번역 - CSS

목록 보기
174/190

@font-face

Baseline | Widely available *

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

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

* 이 기능의 일부 부분은 지원 수준이 다를 수 있어요.

@font-face CSS at-rule은 텍스트를 표시할 사용자 정의 폰트를 지정해요. 폰트는 원격 서버에서 로드하거나 사용자 컴퓨터에 로컬로 설치된 폰트에서 로드할 수 있어요.

@font-face

구문 (Syntax)

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff2") format("woff2");
}

디스크립터 (Descriptors)

ascent-override

폰트의 어센트(ascent) 메트릭을 정의해요.

descent-override

폰트의 디센트(descent) 메트릭을 정의해요.

font-display

폰트가 다운로드되어 사용할 준비가 되었는지, 그리고 그 시점에 따라 폰트가 화면에 어떻게 표시될지 결정합니다.

font-family

폰트 관련 속성에서 폰트 페이스(font face) 값으로 사용할 이름을 지정해요. @font-face 규칙이 유효하려면 이 font-family 이름이 반드시 있어야 합니다.

font-stretch

font-stretch 값이에요. 폰트 페이스가 지원하는 범위를 지정하기 위해 두 개의 값을 받을 수 있습니다. 예를 들어 font-stretch: 50% 200%;처럼요.

font-style

font-style 값이에요. 지원 범위를 지정하기 위해 font-style: oblique 20deg 50deg;와 같이 두 개의 값을 사용할 수 있습니다.

font-weight

font-weight 값이에요. font-weight: 100 400;처럼 두 개의 값을 써서 범위를 지정할 수 있어요.

font-feature-settings

OpenType 폰트의 고급 타이포그래피 기능을 제어할 수 있게 해줍니다.

font-variation-settings

변화시킬 기능의 네 글자 축 이름과 그 변화 값을 지정해서 OpenType이나 TrueType 폰트 변형(variations)을 세밀하게 제어할 수 있게 해줍니다.

line-gap-override

폰트의 라인 갭(line gap) 메트릭을 정의해요.

size-adjust

이 폰트와 관련된 글리프 외곽선 및 메트릭에 대한 배율을 정의해요. 이렇게 하면 서로 다른 폰트들을 같은 폰트 크기로 렌더링할 때 디자인의 조화를 맞추기가 훨씬 쉬워집니다.

src

폰트 포맷이나 기술에 대한 힌트를 포함해서, 폰트 리소스를 가져올 참조 주소를 지정합니다. @font-face 규칙이 유효하려면 src는 필수입니다.

unicode-range

폰트에서 사용할 유니코드 코드 포인트의 범위를 지정해요.

설명 (Description)

보통 url()과 local()을 함께 사용하는 경우가 많아요. 사용자의 장치에 해당 폰트가 이미 설치되어 있다면 그걸 사용하고(local()), 만약 없다면 서버에서 폰트 파일을 다운로드하도록(url()) 폴백(fallback) 구조를 만드는 거죠.

만약 local() 함수를 통해 사용자 기기에서 찾을 폰트 이름을 제공했는데, 브라우저(사용자 에이전트)가 일치하는 폰트를 찾아낸다면 그 로컬 폰트를 바로 사용합니다. 찾지 못했을 때만 url() 함수에 지정된 폰트 리소스를 다운로드해서 사용하게 되고요.

브라우저는 목록에 선언된 순서대로 리소스를 로드하려고 시도해요. 그래서 보통은 local()을 url()보다 앞에 써주는 게 좋습니다. 두 함수 모두 선택 사항이라서, url() 없이 local()만 하나 이상 포함된 규칙 블록을 만드는 것도 가능합니다. 만약 format()이나 tech() 값이 있는 더 구체적인 폰트를 사용하고 싶다면, 그런 값들이 없는 버전보다 앞에 나열해야 해요. 안 그러면 브라우저가 덜 구체적인 버전을 먼저 시도하고 그냥 써버릴 수도 있거든요.

웹에서 폰트를 제공할 때는 WOFF2 포맷을 쓰는 게 일반적으로 가장 좋아요. WOFF나 OpenType 같은 예전 포맷보다 폰트를 더 효율적으로 압축하기 때문에 파일 크기도 줄어들고 로딩 시간도 빨라지거든요. WOFF2는 현대 브라우저에서 지원도 잘 되기 때문에 대부분의 웹사이트에서 기본 선택지로 아주 안전합니다.

@font-face 덕분에 개발자가 직접 폰트를 제공할 수 있게 되면서, 이른바 "웹 안전(web-safe)" 폰트(어디에나 다 있을 법한 아주 흔한 폰트들)에만 갇혀 있지 않고 자유롭게 디자인을 할 수 있게 되었어요. 로컬에 설치된 폰트 이름을 지정해서 쓸 수 있다는 점 덕분에, 기본적인 디자인을 넘어 커스텀을 할 수 있으면서도 인터넷 연결에 의존하지 않고도 폰트를 활용할 수 있게 된 거죠.

참고: 오래된 브라우저에서 폰트를 로드하기 위한 폴백 전략은 src 디스크립터 페이지에 잘 설명되어 있습니다.

@font-face 앳 규칙은 CSS의 최상위 레벨뿐만 아니라, CSS 조건부 그룹 앳 규칙 안에서도 사용할 수 있답니다.

폰트 MIME 타입 (Font MIME Types)

포맷 (Format)MIME 타입 (MIME type)
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Formatfont/woff
Web Open Font Format 2font/woff2

주의 사항 (Notes)

  • 웹 폰트는 동일 출처 정책(Same-origin policy)의 제한을 받아요. 즉, 폰트 파일은 해당 폰트를 사용하는 페이지와 같은 도메인에 있어야 한다는 뜻이죠. 물론 HTTP 접근 제어(CORS)를 설정해서 이 제한을 완화할 수는 있습니다.
  • @font-face는 CSS 선택자 안에서 선언할 수 없습니다. 예를 들어, 아래와 같은 코드는 작동하지 않아요.
/* 잘못된 예시입니다! */
.className {
  @font-face {
    font-family: "MyHelvetica";
    src:
      local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url("MgOpenModernaBold.woff2");
    font-weight: bold;
  }
}

형식적인 구문 (Formal syntax)

@font-face = 
  @font-face { <declaration-list> }

이 구문은 CSS Fonts Module Level 4의 최신 표준을 따르고 있습니다. 모든 브라우저가 모든 부분을 완벽히 구현한 것은 아닐 수 있으니, 브라우저 호환성 정보를 꼭 확인해 보세요.

예제 (Examples)

다운로드 가능한 폰트 지정하기

이 예제는 다운로드해서 사용할 폰트를 지정하고, 이를 문서 전체(body)에 적용하는 방법을 보여줍니다.

HTML

<body>
  이것은 Bitstream Vera Serif Bold 폰트입니다.
</body>

CSS

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("[https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2](https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2)");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
}

결과 (Result)

MDN Playground에서 예제 실행하기

로컬 폰트 대안 지정하기

이 예제에서는 사용자의 기기에 설치된 "Helvetica Neue Bold"를 먼저 사용하려고 시도합니다. (전체 폰트 이름과 Postscript 이름을 모두 찾아보죠.) 만약 사용자의 기기에 해당 폰트가 없다면, 그제야 "MgOpenModernaBold.woff2"라는 이름의 다운로드 가능한 폰트를 대신 사용하게 됩니다.

@font-face {
  font-family: "MyHelvetica";
  src:
    local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.woff2");
  font-weight: bold;
}
profile
김동현
프론트에_가까운_풀스택_개발자
이전 포스트

Reference/At-rules/@container

다음 포스트

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

0개의 댓글