CSS @font-face: 글꼴 정의

CSS @font-face @규칙은 텍스트를 표시할 때 사용할 사용자 지정 글꼴을 정의합니다. 글꼴 자체는 원격 서버에서 불러올 수도 있고, 사용자 컴퓨터에 설치된 것을 사용할 수도 있습니다.

구문

@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.woff") format("woff");
}

서술자

ascent-override

글꼴의 윗선(ascent) 수치를 정의합니다.

descent-override

글꼴의 밑선(descent) 수치를 정의합니다.

font-display

글꼴을 불러오는 동안, 그리고 불러온 후에 어떻게 표시할 것인지 지정합니다.

font-family

이 글꼴이 속하는 글꼴 가족의 이름을 지정합니다.

font-feature-settings

OpenType 글꼴의 고급 설정을 조정할 수 있습니다.

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-variation-settings

OpenType과 TrueType 가변 글꼴의 디자인 축(axis)을 직접 조절할 수 있습니다.

line-gap-override

글꼴의 행간 수치를 정의합니다.

size-adjust

글꼴의 자형(glyph) 외곽선 및 이 글꼴의 여러 수치에 곱할 계수를 지정합니다. 다양한 글꼴을 같은 크기로 렌더링 하면서도 조화를 유지해야 할 때 유용합니다.

src

글꼴의 데이터가 담긴 리소스를 지정합니다. 원격 글꼴 파일의 URL일 수도 있고, 사용자 컴퓨터에 저장된 글꼴의 이름일 수도 있습니다.

format() 함수로 글꼴 리소스의 형식을 나타내면 브라우저가 적합한 글꼴을 선택할 때 참고합니다.

src: url(ideal-sans-serif.woff) format('woff'), url(basic-sans-serif.ttf) format('truetype');

unicode-range

이 글꼴이 사용할 Unicode 코드 포인트 범위를 지정합니다.

설명

보통은 local()과 url()을 함께 사용해서, 사용자가 글꼴을 설치하지 않았어도 서버에서 제공하는 글꼴을 다운로드해서 사용하게 지정하는 방법이 많이 쓰입니다.

src에 local() 함수를 사용한 경우, 사용자 에이전트는 local()의 매개변수로 받은 글꼴 이름을 사용자 시스템에서 탐색합니다. 만약 일치하는 글꼴이 존재하면 그 글꼴을 사용하고, 찾을 수 없었으면 src의 다음 항목으로 넘어갑니다.

브라우저는 리소스를 선언 순서대로 불러오려 시도하므로 보통 local()을 url()보다 먼저 선언합니다. 두 함수 모두 선택사항이므로 url()만 사용하거나 local()만 사용하는 것도 가능합니다. format()이나 tech()를 사용하는 더 구체적인 글꼴이 더 적합하다면, 이런 추가 정보를 가진 글꼴을 먼저 선언해야 덜 구체적인 글꼴보다 먼저 불러오려고 시도할 것입니다.

@font-face는 반드시 최상위 CSS에서만 사용할 수 있는 것은 아니고, 조건 그룹 @규칙 내부에도 배치할 수 있습니다.

글꼴의 MIME 유형

참고

웹 폰트는 동일 출처 정책의 기본 통제 대상입니다. 따라서 CORS를 별도로 설정하지 않았다면 글꼴 파일을 사용하려는 페이지는 글꼴 파일과 같은 도메인에 위치해야 합니다.

@font-face를 CSS 선택자 안에서 사용할 수는 없습니다. 예를 들어, 아래 코드는 올바르지 않습니다.

.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
         local("HelveticaNeue-Bold"),
         url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

예제

원격 글꼴 파일 추가하기

다음의 예제는 원격 서버에 올라간 글꼴 파일을 추가한 후 문서 전체에 그 글꼴을 적용합니다.

@font-face {
  font-family: 'Do Hyeon';
  src: url('/assets/DoHyeon-Regular.ttf') format('truetype');
}

body {
  font-family: 'Do Hyeon', sans-serif;
  font-size: 1.8em;
}

<p>배달의민족 도현체는 작도 후 아크릴판에 자를 대고 컷팅해서 만든 옛 간판을 모티브로한 서체입니다.</p>

로컬 글꼴 사용하기

위의 예제와 달리, 이번에는 사용자의 컴퓨터에 이미 설치된 글꼴을 추가합니다. 사용자 컴퓨터에 설치된 글꼴의 이름이 약간 다를 수도 있으므로 가능성이 높은 이름(Do Hyeon과 DoHyeon)을 모두 지정하는 것을 볼 수 있습니다.

@font-face {
  font-family: 'Do Hyeon';
  src: local('Do Hyeon'), local('DoHyeon');
}

명세

CSS Fonts Module Level 4

브라우저 호환성