CSS @font-face 규칙 – 사용자 정의 글꼴을 지정

`@font-face` 규칙

@font-face는
스타일시트에 적용할 사용자 정의 글꼴을 지정하는 CSS 구문 규칙입니다.

이 규칙을 사용하면 스타일시트에 사용자 정의 글꼴을 지정할 수 있으며,
원하는 선택자에 font-family 속성을 사용해 그 글꼴을 적용할 수 있습니다.
사용자 디바이스에 설치된 글꼴뿐만 아니라 호스팅된 사용자 정의 글꼴도 불러와 어디에서나 사용할 수 있는 매우 유용한 기능입니다.

이렇게 하면, 사용자 누구에게나 원하는 스타일의 글꼴을 동일하게 보여줄 수 있는 장점이 있습니다.

CSS

/* @font-face 규칙으로
   스타일시트에 적용할 사용자 정의 글꼴을 지정 */
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* @font-face 규칙으로 지정한 사용자 정의 글꼴 사용 */
body {
    font-family: "Nanum Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

알아두세요!
@font-face 규칙을 사용하여 웹 페이지에 사용자 정의 글꼴을 적용한 글꼴을 일반적으로 '웹 폰트'라고 부릅니다.
웹 폰트는 사용자 디바이스에 설치된 글꼴(일반적으로 '시스템 폰트')이 아닌, 웹사이트에서 제공하는 글꼴 파일을 불러와 브라우저가 렌더링할 수 있도록 고안된 폰트로 다른 폰트와 구별해서 사용하는 용어입니다.

@font-face 규칙에 대한 구문 형식은 다음과 같습니다.

구문

CSS

@font-face {
    font-family: <글꼴 이름>; /* 필수: 사용할 글꼴의 이름 */
    src: <출처>, <출처>; /* 필수: 글꼴 파일의 경로 (쉼표(,)로 구분해서여러 출처 추가 가능) */
    font-weight: <굵기>; /* 선택적 옵션임: 글꼴의 굵기 */
    font-style: <스타일>; /* 선택적 옵션임: 글꼴의 스타일 */
    font-display: <디스플레이 옵션>; /* 선택적 옵션임: 글꼴의 로딩 방법 */
    unicode-range: <유니코드 범위>; /* 선택적 옵션임: 글꼴이 지원하는 유니코드 범위 */
}

`font-family` (필수)

@font-face 규칙으로 지정한 사용자 정의 글꼴의 font-family 속성의 값으로 사용할 '글꼴 이름'을 <글꼴 이름>에 지정합니다.

하이픈(-) 외에 띄어쓰기나 특수 문자가 포함되어 있으면 쌍따옴표나 홑따옴표로 감싸줍니다.
영문이 아닌 이름은 무조건 쌍따옴표나 홑따옴표로 감싸주는 것을 권장합니다.

CSS

@font-face {
    font-family: abcd;
    ...
}
@font-face {
    font-family: "abcd";
    ...
}
@font-face {
    font-family: abcd-ef;
    ...
}
@font-face {
    font-family: "compay font 2014";
    ...
}
@font-face {
    font-family: "우리회사 폰트";
    ...
}

CSS

@font-face {
    font-family: test@foo;
    ...
}
@font-face {
    font-family: compay font 2014;
    ...
}
@font-face {
    font-family: 우리회사 폰트;
    ...
}

`src` (필수)

사용자 정의 글꼴의 파일의 리소스를 지정합니다.

파일의 위치를 나타내는 URL 값을 url("URL 값") 형식으로 지정하거나, 사용자 디비아스에 설치된 글꼴 이름을 local("폰트 이름")형식으로 지정할 수 있습니다. 이때, 사용자 디비아스에 설치된 글꼴 이름으로 출처로 사용하면 브라우저는 사용자의 디바이스에 이미 설치된 글꼴를 먼저 사용하게 되어, 네트워크에서 글꼴 파일을 다운로드하는 시간을 줄일 수 있습니다.
여러 출처를 쉼표(,)로 구분하여 추가할 수 있습니다.
브라우저는 여러 출처일 경우 출처를 작성한 순서에 따라 파일을 로드하려고 하므로, local("폰트 이름")가 출처에 있다면 먼저 작성하는게 좋습니다.
출처가 파일의 위치를 나타내는 URL 값일 때에는 선택적 옵션으로 format()을 함께 사용하여 글꼴 파일의 형식을 지정할 수 있습니다.
예를 들어, url("URL 값") format("woff2")와 같이 사용할 수 있습니다. 이렇게 하면 모든 브라우저가 모든 형식의 글꼴 파일을 지원하는 것은 아니므로, 특정 형식이 필요하다는 정보를 제공하여 브라우저가 올바른 글꼴 파일을 빠르게 선택하고 최적의 성능을 제공하는 데 도움을 줍니다.

CSS

@font-face {
    ...
    src: local("Nanum Gothic"), /* 사용자 디바이스에 설치된 글꼴 */
         url("fonts/NanumBarunGothic.woff2") format("woff2"); /* 호스팅된 글꼴 */
    ...
}

지원하는 글꼴 파일 형식

지원하는 글꼴 파일 형식
글꼴 파일 형식	사용 예시
TrueType (TTF)	`format("truetype")`
OpenType (OTF)	`format("opentype")`
Web Open Font Format (WOFF)	`format("woff")`
Web Open Font Format 2 (WOFF2)	`format("woff2")`

지원하는 글꼴 파일 형식에 대한 브라우저 호환성을 참조하세요.

글꼴 파일 형식의 브라우저 호환성
글꼴 파일 형식	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
TTF/OTF	4	12	3.5	3.1
WOFF	6	12	3.5	5.1
WOFF2	36	14	39	10

WOFF2 글꼴 형식의 장점

TTF와 OTF 형식은 웹 최적화가 이루어지지 않아 파일 크기가 상대적으로 크고, 로딩 속도에 부정적인 영향을 미칠 수 있습니다. 이러한 형식은 웹 전용이 아니기 때문에, 웹 페이지에서 사용하는 데 있어 최적화되지 않은 점이 있습니다.

WOFF는 웹 폰트를 위해 설계되었지만, WOFF2에 비해 파일 크기가 더 크고 압축 효율성이 떨어집니다.

WOFF2(Web Open Font Format 2)는 웹에서 글꼴을 사용할 때 가장 추천되는 파일 형식 중 하나입니다. 다음과 같은 장점이 있습니다.

효율적인 압축: WOFF2는 뛰어난 압축률을 제공하여 파일 크기를 줄이고 페이지 로딩 속도를 향상시킵니다.
브라우저 호환성: 대부분의 최신 브라우저에서 WOFF2를 지원하므로 안전하게 사용할 수 있습니다.
서버 성능 최적화: WOFF2 파일을 사용하면 웹 페이지의 로딩 시간을 단축시키고 서버의 대역폭 사용량을 줄이는 데 도움을 줍니다.

`font-weight` (선택적 옵션임)

@font-face 규칙으로 지정한 사용자 정의 글꼴의 font-weight 속성의 값으로 사용할 글꼴의 굵기를 <굵기>에 지정합니다.

굵기는 숫자 값(100 ~ 900)이나 키워드 값(예: normal, bold)으로 지정할 수 있습니다.

반드시 기본적으로 제공되는 굵기 규칙에 맞출 필요는 없습니다. 원하는 스타일에 따라 숫자 값이나 키워드를 사용할 수 있으며, 특정 글꼴이 지원하는 굵기 값에 따라 다르게 적용될 수 있습니다. 하지만, 가급적 원본 글꼴에 적용된 굵기 값으로 지정하는 것이 좋습니다. 이렇게 하면 디자인의 일관성을 유지하고, 글꼴이 의도한 대로 표현되도록 할 수 있습니다.

font-weight가 선택적 옵션이더라도 항상 명시적으로 지정하는 것이 좋습니다.
그렇지 않으면, 글꼴 파일의 실제 글꼴 굵기와 상관없이 초깃값인 normal(숫자값 400)로 설정됩니다.

`font-style` (선택적 옵션임)

@font-face 규칙으로 지정한 사용자 정의 글꼴의 font-style 속성의 값으로 사용할 ' 글꼴의 스타일'를 <스타일>에 지정합니다.

사용되는 값으로는 normal, italic, oblique가 있습니다.
임의로 설정할 수 있지만, 가급적 원본 글꼴에서 제공하는 스타일 값을 사용하는 것이 좋습니다. 이는 글꼴의 디자인 의도를 유지하고, 시각적으로 일관된 결과를 얻는 데 도움이 됩니다.

font-style이 선택적 옵션이더라도 항상 명시적으로 지정하는 것이 좋습니다.
그렇지 않으면, 글꼴 파일의 실제 글꼴 스타일과 상관없이 초깃값인 normal로 설정됩니다.

`font-display` (선택적 옵션임)

font-display 속성은 @font-face 규칙에서만 사용할 수 있는 속성입니다.

이 속성은 호스팅된 사용자 정의 글꼴의 로드 여부와 시기에 따라 글꼴의 표시 방식을 결정합니다.
웹 페이지의 내용과 목적, 디자인을 고려하여 글꼴의 로드 상황에 맞춰 필요한 옵션을 선택할 수 있어 유용합니다.

값

font-display 속성의 값
`auto`	초깃값입니다. 브라우저의 정책에 의해서 로딩 전략을 결정합니다.
`block`	글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다. 만약 짧은 기간(명세서에 따르면 약 3 초) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴을 대신해서 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다. 나중에라도 언제든지 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다.
`swap`	글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다. 만약 매우 짧은 기간(명세서에 따르면 약 0.1 초 ) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴을 대신해서 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다. 나중에라도 언제든지 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다.
`fallback`	글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다. 만약 매우 짧은 기간(명세서에 따르면 약 0.1 초) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴을 대신해서 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다. 명세서에 따르면 처음 약 3 초 동안에는 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 하지만, 그 이후에는 브라우저는 해당 글꼴의 표시를 포기하고 사용자 디바이스에 설치되어 있는 대체 글꼴만로 표시합니다.
`optional`	글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다. 만약 매우 짧은 기간(명세서에 따르면 약 0.1 초) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴의 표시를 포기하고 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다. 나중에 글꼴이 로드되더라도 해당 로드된 글꼴로의 교체는 허용하지 않습니다.

위 값에 대한 설명해서 사용한 기간이나 시간은 브라우저가 다운로드한 글꼴을 사용하려고 시도하는 순간부터 시작되는 타이머를 기반으로 합니다.

`unicode-range` (선택적 옵션임)

unicode-range 속성은 @font-face 규칙에서만 사용할 수 있는 속성입니다.
이 속성으로 호스팅된 사용자 정의 글꼴에서 사용할 특정 유니코드 문자 집합인 유니코드 포인트 범위를 지정할 수 있습니다.

이렇게하면, 브라우저가 사용자 정의 글꼴 파일을 다운로드할 때 전체 문자에 대한 글꼴을 다운로드하는 것이 아니라, 특정 문자 범위 내에 있는 글꼴만을 다운로드합니다.

사용자 정의 글꼴의 모든 유니코드 문자가 아닌 특정 유니코드 문자 집합 범위에 대해서만 지정하기 때문에 글꼴 파일의 로드되는 양을 줄일 수 있어서 웹 페이지의 로딩 성능을 개선합니다.

CSS

/* @font-face 규칙을 통해
   웹에 호스팅된 "Nanum Gothic" 글꼴을 로드하고,
   한글 음절에 해당하는 유니코드 범위만 사용하도록 설정합니다. */
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"), /* 사용자 디바이스에 설치된 글꼴 */
         url("fonts/NanumBarunGothic.woff2") format("woff2"); /* 호스팅된 글꼴 */
    unicode-range: U+AC00-D7A3; /* 한글을 포함하는 범위만 다운로드해서 사용 */
}

unicode(유니코드 , 공식 명칭 The Unicode Standard)

컴퓨터는 문자를 숫자로 인식합니다. 이러한 숫자들을 표준화한 시스템이 바로 unicode(유니코드)입니다.
유니코드는 전 세계의 다양한 문자를 고유한 숫자( '코드 포인트' 라고 함)로 매핑해서 관리합니다. 예를 들어, 한글의 첫 글자인 가는 U+AC00이라는 유니코드 번호('코드 포인트 번호)로 지정되어 있습니다. 각 문자에 부여된 유니코드 번호는 정해진 규칙과 표준에 따라 규격화됩니다. 예를 들어, 한글 음절은 U+AC00에서 U+D7A3까지의 범위로 규격화되어 있습니다.

유니코드는 모든 언어의 문자와 기호를 포함하며, 이를 통해 다양한 언어의 텍스트를 일관되게 표현하고 처리할 수 있습니다.

규격화된 문자 범위

언어별, 숫자, 특수문자 등에는 유니코드 번호의 범위가 규격화되어 있습니다.

unicode-range 속성은
이러한 유니코드의 규격화된 문자 범위를 활용하여 브라우저가 글꼴 파일을 다운로드할 때 필요한 범위의 문자 파일만 다운로드하도록 할 수 있습니다. 이렇게 하면, 글꼴의 모든 문자 파일을 다운로드하지 않고 필요한 문자 파일만 다운로드되므로 화면에 빠르게 렌더링할 수 있습니다.

유니코드 번호 범위에 대한 참조 자료입니다.

형식 구문

구문

CSS

/* <unicode-range> 값 예시 */
unicode-range: U+26; /* 단일 코드 포인트 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* 코드 포인트 범위 */
unicode-range: U+4??; /* 와일드카드 범위 */
unicode-range: U+0025-00FF, U+4??; /* 여러 값 지정 */

값

다음의 각 <unicode-range> 값은 U+ 또는 u+ 접두사로 시작하며, 그 뒤에 아래 나열된 세 가지 형태 중 하나의 코드 포인트 범위가 옵니다. 이러한 형태 중 하나에 맞지 않는 범위는 유효하지 않으며 선언이 무시됩니다.

unicode-range 속성의 값
단일 코드 포인트	단일 유니코드 문자 코드 포인트를 의미합니다. 예를 들어, `U+26`은 특정 문자 하나만을 포함합니다.
코드 포인트 범위	유니코드 코드 포인트의 범위를 지정합니다. 범위를 시작하는 코드 포인드와 범위를 끝내는 코드 포인트 사이에 하이픈(`-`) 기호를 추가합니다. 예를 들어, `U+0025-00FF`는 `U+0025`에서 `U+00FF`까지의 모든 문자를 포함합니다.
와일드카드 범위	와일드카드 문자인 `?`를 사용하여 해당하는 범위(예: `U+???`)에 표시함으로써 코드 포인트의 범위를 지정합니다. 예를 들어, `U+4??`는 `U+400`에서 `U+4FF`까지의 모든 문자를 포함합니다.

유용한 유니코드 번호의 범위

다음의 표는 활용도가 많은 유용한 유니코드 번호의 범위입니다.

유용한 유니코드 번호의 범위
범주	유니코드 범위	설명	예시 코드
한글	`U+AC00` ~ `U+D7A3`	모든 한글 음절	`unicode-range: U+AC00-D7A3;`
영문 알파벳	`U+0041` ~ `U+007A`	대문자 `A` ~ 소문자 `z`	`unicode-range: U+0041-007A;`
숫자	`U+0030` ~ `U+0039`	아라비아 숫자 `0` ~ `9`	`unicode-range: U+0030-0039;`
특수문자	`U+0021` ~ `U+007E`	다양한 기호 및 특수 문자 (예: `!`, `@`, `#`, `$` 등)	`unicode-range: U+0021-007E;`

여러 값 지정하기

unicode-range 속성은 여러 개의 문자 범위를 한꺼번에 지정할 수 있습니다. 이를 통해 브라우저가 특정 문자 집합만 다운로드하도록 제한할 수 있습니다. 여러 값은 쉼표(,)로 구분하여 값을 나열하면 됩니다.

이와 같은 방식으로 unicode-range를 지정하면, 지정된 범위의 문자에 대해서만 해당 글꼴이 적용되도록 할 수 있습니다.

주의할 점

@font-face 규칙을 사용해서 원하는 선택자에 font-family 속성을 사용해 그 글꼴을 지정하더라도 항상 '글꼴 종류'를 마지막에 추가해 줄 것을 권장합니다.

이렇게 하면 브라우저가 정확한 '글꼴 이름'을 선택할 수 없을 경우(네트워크 에러나 글꼴의 렌더링이 늦어지는 경우) 대체 글꼴로 마지막에 추가한 '글꼴 종류'에서 비슷한 스타일의 글꼴을 적용할 수 있기 때문입니다.

CSS

@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"),
         url("fonts/NanumBarunGothic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* @font-face로 지정한 사용자 정의 글꼴 사용 */
body {
    font-family: "Nanum Gothic", sans-serif; /*  sans-serif로 '글꼴 종류'를 추가 */
    font-weight: 400;
    font-style: normal;
}

브라우저 호환성

@font-face 규칙의 브라우저 호환성
구문	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`@font-face`	1	12	3.5	3.1
`font-family`	4	12	3.5	3.1
`font-weight`	4	12	3.5	3.1
`font-style`	4	12	3.5	3.1
`font-display`	60	79	58	11.1
`unicode-range`	1	12	36	3.1

명세서

@font-face 규칙의 명세서 사양
명세서 사양
`@font-face`	CSS Fonts Module Level 4 #font-face-rule

참고문헌

MDN - @font-face

@font-face 규칙

구문

font-family (필수)

src (필수)