CSS에서 사용할 글꼴을 정의한다.
전통적으로 웹브라우저는 운영체제 시스템의 글꼴을 기반으로 텍스트를 렌더링했지만 모던 웹사이트는 제작자가 직접 글꼴을 원하는 대로 지정할 수 있게 되었다. 이것을 '웹폰트'라 부르며 글꼴 리소스를 서버에 두어 필요한 경우 클라이언트에 임시 다운로드해서 웹브라우저가 사용한다. 이렇게 글꼴 제약에서 벗어나면서 콘텐츠는 타이포그래피를 적용받게 되었다.
@font-face 룰은 웹폰트 세트를 정의해서 CSS의 top-level에서 뿐 아니라, 다음과 같은 CSS conditional-group at-rule 안에서도 사용될 수 있다.
@media : CSS Conditionals Level 3 Module@supports : CSS Conditionals Level 3 Module@document : CSS Conditionals Level 4 Module@font-face { font-family: <family-name>; src: [<src>]#; [font-weight: <font-weight>;]? [font-style: <font-style>;]? [unicode-range: <unicode-range>;]? [font-feature-settings: <'font-feature-settings'>;]? [font-variation-settings: <'font-variation-settings'>;]? [font-named-instance: <font-named-instance>;]? [font-display: <font-display>;]? [font-language-override: <'font-language-override'>;]? [ascent-override: <ascent-override>;]? [descent-override: <descent-override>;]? [line-gap-override: <line-gap-override>;]?}[사용 가능한 값]은 설정 가능한 모든 값을 나열하지 않을 수도 있다. 자세한 사항은 각 항목의 추가 정보를 확인하라.
글꼴의 ascent metric을 정의한다.
normal | <percentage>해당 매트릭 값을 글꼴 파일에서 직접 가져온다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
어떠한 기준으로 부터 백분율로 표현한다.
글꼴의 descent metric을 정의한다.
normal | <percentage>해당 매트릭 값을 글꼴 파일에서 직접 가져온다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
어떠한 기준으로 부터 백분율로 표현한다.
폰트 페이스(font face)의 다운로드 및 사용 준비 여부와 시기에 따라 폰트 페이스가 표시되는 방식을 결정한다.
auto | block | swap | fallback | optional
유저 에이전트가 정의한다.
폰트 페이스(font face)에 짧은 블록 주기(대부분의 경우 3초)와 무한 스왑 주기를 부여한다.
폰트 페이스(font face)에 매우 짧은 블록 주기(대부분의 경우 100ms 이하)와 짧은 스왑 주기(대부분의 경우 3초)를 부여한다.
폰트 페이스(font face)에 매우 짧은 블록 주기를 부여하고 스왑 주기를 부여하지 않는다.
폰트 페이스(font face)에 매우 짧은 블록 주기(대부분의 경우 100ms 이하)와 무한 스왑 주기를 부여한다.
font-family 속성에 사용될 글꼴 이름을 정의한다. @font-face 규칙이 유효하려면 반드시 설정해야 한다.
font-family의 값(이름)이 특정 사용자 환경에서 사용 가능한 폰트 패밀리와 동일한 경우 스타일시트를 사용하는 문서에서 기본 글꼴을 효과적으로 숨긴다. 따라서 특정 사용자 환경에 존재하는 다른 폰트 패밀리 이름과의 충돌을 걱정하지 않고 자유롭게 font-family의 이름을 지정할 수 있다.
일반 구성이 아닌 글꼴명을 자료로 하는 타입이다. 따옴표로 인용되어야 한다.
font-family: "myfont1", "myfont2";
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
font-feature-settings 속성과 동일한 값을 갖지만 CSS 와이드 키워드(css wide keywords)가 생략된다.
font-feature-settings 속성에 사용되는 타입이다.
normal | <feature-tag-value>#
글리프(glyph) 선택 또는 위치가 변경되지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
OpenType 글꼴 기능(font features)에 대한 하위 수준 제어를 위한 값을 나타낸다.
<string> [ <integer> | on | off ]?
<string>은 대소문자를 구분하는 OpenType 기능 태그이다. OpenType 사양에 명시된 대로 기능 태그에는 4개의 ASCII 문자가 포함된다. 4자보다 길거나 짧은 태그 문자열 또는 U+20-7E 코드 포인트 범위를 벗어난 문자가 포함된 태그 문자열은 유효하지 않다. 기능 태그는 글꼴에 정의된 기능 태그와 일치하기만 하면 되므로 명시적으로 등록된 OpenType기능으로 제한되지 않는다. 사용자 정의 기능 태그를 정의하는 글꼴은 OpenType 사양에 정의된 태그 이름 규칙을 따라야 한다.
<integer>가 있는 경우 글리프(glyph) 선택에 사용되는 인덱스를 나타낸다. 명시하는 경우에 값은 0 이상이어야 한다. 0 값은 기능이 비활성화되었음을 나타낸다. 1이면 기능이 활성화되고 1보다 큰 경우에는 기능이 활성화되고 기능 선택 인덱스를 나타낸다.
on 키워드는 1과 같고 off 키워드는 0과 같다.
값을 생략하면 기본 값은 1이다.
font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
font-feature-settings: "liga" off; /* liga=0 no common ligatures */
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
font-feature-settings: "silly" off; /* invalid, tag too long */
font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
font-feature-settings: dlig; /* invalid, tag must be a string */<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
0과 같고 비활성화한다.
1과 같고 활성화한다.
@font-face 규칙에 정의된 글꼴이 렌더링될 때 적용되는 초기 설정을 정의한다. 글꼴 선택에는 영향을 주지 않는다.
font-language-override 속성에 사용되는 타입이다.
normal | <string>OpenType 글꼴로 렌더링할 때 요소의 콘텐츠 언어를 사용하여 OpenType 언어 시스템을 유추하도록 지정한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
font-named-instance 디스크립터가 auto 이외의 값으로 설정된 경우 Font Feature and Variation Resolution의 해당 단계에서 글꼴 파일을 검사하여 Localized name matching의 주어진 규칙에 따라 주어진 <string>과 동일한 지역화된 이름을 가진 글꼴에서 첫 번째 명명된 인스턴스를 찾는다.
auto | <string>아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
CSS 속성에 따라 정해진 값으로 처리한다. 속성에 따라 auto가 갖는 값의 의미는 다르므로 반드시 해당 속성에서의 값이 의미하는 내용을 확인해야 한다.
font-stretch 속성을 참고해 주기 바란다.
auto | <'font-stretch'>{1,2}
글꼴 선택의 경우 적절한 초기값이 선택된 것처럼 글꼴이 선택된다. 변형 축 클램핑(clamping)의 경우 클램핑(clamping)이 발생하지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
font-stretch 속성에 사용되는 타입이다.
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
normal | <percentage> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
CSS Fonts Module Level 4에서는 <percentage> 값이 가능해졌다.
텍스트를 넓이거나 좁히는 키워드를 나타낸다. CSS Fonts Module Level 4의 font 속기 속성에만 사용되는 font-stretch 값을 따로 분류하기 위해서 정한 유형이다.
[normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]
normal 보다 압축된 글꼴을 지정한다.
normal 보다 확장한다.
normal 보다 더 압축한다.
normal 보다 더 확장한다.
일반 글꼴을 지정한다.
condensed 값의 반 정도의 압축을 한다.
expanded 값보다 반 정도 확장한다.
normal 보다 더 초압축된 글꼴을 지정한다.
normal 보다 더 최대 확장한다.
어떠한 기준으로 부터 백분율로 표현한다.
font-style 속성을 참고해 주기 바란다.
auto | normal | italic | oblique [ <angle>{1,2} ]?
글꼴 선택의 경우 적절한 초기값이 선택된 것처럼 글꼴이 선택된다. 변형 축 클램핑(clamping)의 경우 클램핑(clamping)이 발생하지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
font-style 속성에 사용되는 타입이다.
normal | italic | oblique
normal | italic | oblique <angle>?
CSS Fonts Module Level 4에서는 oblique를 지정시 각도를 직접 지정할 수 있다. -90deg보다 작은 값이나 90deg보다 큰 값은 유효하지 않다. 각도가 지정되지 않으면 14deg로 처리한다.
현재 파이어폭스(Firefox)는 지원하지만 다른 웹브라우저는 확인이 필요하다.
0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
<angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
기울임꼴로 지정된 글꼴을 사용한다. 만약에 사용할 수 없다면 비스듬한 글꼴(oblique)을 사용한다. 둘 다 사용할 수 없다면 인위적으로 시물레이션이 된다.
기울임꼴이나 비스듬한 형태가 아닌 일반 형태를 나타낸다.
비스듬한 면으로 지정된 글꼴을 선택한다. 면이 비스듬한 글꼴을 사용할 수 없다면 기울임꼴(italic)로 분류된 면이 대신 사용된다. 둘 다 사용할 수 없다면 인위적으로 시물레이션 된다.
추가적으로 <angle> 값을 사용하여 기울기 각도를 조정할 수 있다.
현재 파이어폭스 이외의 웹브라우저는 확인이 필요하다.
0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.
<angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.
선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.
font-variation-settings 속성과 동일한 값을 갖지만 CSS 와이드 키워드(css wide keywords)가 생략된다.
font-variation-settings 속성에 사용되는 타입이다.
OpenType 또는 TrueType 글꼴 변형에 대한 낮은 수준의 제어를 설정하기 위한 값을 나타낸다.
normal | [ <string> <number>]#
글리프(glyph)) 모양, 일치 또는 위치가 변경되지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
정수 또는 실수를 표현한다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
font-weight 속성을 참고해 주기 바란다.
auto | <font-weight-absolute>{1,2}
글꼴 선택의 경우 적절한 초기값이 선택된 것처럼 글꼴이 선택된다. 변형 축 클램핑(clamping)의 경우 클램핑(clamping)이 발생하지 않는다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
font-weight 속성에 사용되는 글꼴 굵기의 절대값을 나타낸다.
[normal | bold | <number [1,1000]>]
얇은 두께로 처리한다.
매우 가볍게 처리한다.
가벼운 두께로 지정한다.
일반 굵기로 지정한다.
중간 굵기로 지정한다.
'700'의 반 굵기로 지정한다.
굵게 지정한다.
매우 굵게 지정한다.
매우 무겁게 지정한다.
'700' 값과 동일하다.
'400' 값과 동일하다.
글꼴의 line gap metric을 정의한다.
normal | <percentage>해당 매트릭 값을 글꼴 파일에서 직접 가져온다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
어떠한 기준으로 부터 백분율로 표현한다.
글꼴 데이터를 포함하는 리소스를 지정한다. 원격 위치의 URL이거나 사용자 기기에 내장된 글꼴 이름으로서 필요하다면 쉼표로 구분하여 목록으로 작성한다. 작성 순서에 따라 우선 순위(실패시)를 가지며 글꼴을 로드한다. @font-face가 유효하려면 반드시 지정해야 한다. 원격 위치의 경우에는 url() 함수형 구문을, 로컬 위치의 경우에는 local() 함수형 구문을 사용한다. 일반적으로 local() 함수형 구문은 리소스 목록에서 맨 끝 쪽에 위치하여 우선 순위를 마지막으로 둔다.
<url> [ format(<font-format>)]? [ tech( <font-tech>#)]? | local(<font-face-name>)
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
local() 함수형 구문의 인수로서 더 큰 폰트 패밀리(font family) 내에서 단일 폰트를 고유하게 식별하는 문자열이다. 선택적으로 따옴표로 묶을 수 있다. 따옴표로 묶지 않으면 따옴표로 묶지 않은 폰트 패밀리(font family) 네임 처리 규칙이 적용되며 이름은 공백으로 구분된 시퀀스여야 한다. 식별자를 하나의 공백으로 구분, 결합하여 문자열로 변환한다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
format() 함수형 구문에 인수로 사용되는 값을 나타낸다.
| 문자열(인수) | 폰트 포맷 | 확장자 |
|---|---|---|
| "woff" | WOFF 1.0 (Web Open Font Format) | .woff |
| "woff2" | WOFF 2.0 (Web Open Font Format) | .woff2 |
| "truetype" | TrueType | .ttf |
| "opentype" | OpenType | .ttf, .otf |
| "embedded-opentype" | Embedded OpenType | .eot |
| "svg" | SVG Font(deprecated) | .svg, .svgz |
| "collection" | OpenType Collection | .otc, .ttc |
[<string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
단일 파일 구조로 여러 OpenType 폰트 리소스를 제공하는 수단이다.
EULA 계약을 위반하지 않고 웹 콘텐츠에서 사용할 수 있는 폰트 메커니즘이 필요하여 Microsoft가 글꼴 제작자와 협력하여 EOT 파일 형식을 개발하였다.
OpenType 글꼴 형식은 디지털 타이포그래피를 위한 다양한 기능을 갖춘 글꼴 데이터 대해 널리 지원되는 형식이다. 1990년대에 Microsoft와 Adobe가 공동 개발한 글꼴 기술이다.
SVG 글꼴은 SVG의 font 요소를 사용하여 정의된 글꼴이다. 기술적인 이유로 작은 글꼴 크기로 텍스트의 품질과 가독성에 제한이 있을 수 있다.
1980년대 말에 Microsoft와 Apple이 Adobe에 맞서기 위해서 개발된 글꼴 저장 기술이다. 주된 장점은 글꼴 개발자가 다양한 글꼴 크기에서 어떻게 표시될 것인지에 대한 높은 수준의 제어를 할 수 있는 힌팅(hinting) 기술을 가지고 있다.
TrueType, OpenType, Open Font Format(OFF) 글꼴에 사용되는 테이블 기반 sfnt 구조를 위한 컨테이너이다. 글꼴 데이터 테이블을 선택적으로 압축한 sfnt 글꼴의 리패키지 버전이다.
woff 보다 휠씬 뛰어난 압축률로 글꼴 데이터의 압축을 합리적으로 쉽게 구현할 수 있도록 설계되었으며, @font-face 규칙과 함께 사용하기에 적합하다.
다양한 글꼴 기능 지원 기술을 나타낸다.
[<font-feature-tech> | <color-font-tech> | variations | palettes | incremental ]
다양한 유형의 색상 글꼴 파일 기술을 나타낸다.
[color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]
컬러 비트맵 글리프 데이터를 포함하는 데 사용되는 테이블이다. 임베디드(embedded) 비트맵 로케이터(locators)를 제공하는 CBLC 테이블과 함께 사용된다.
단색만을 지원한다. 그라디언트, 변형 및 다양한 혼합 모드는 지원하지 않는다.
OpenType 1.9 표준의 일부이다. 선형, 방사형, 원뿔형 그라데이션이 가능하다. 또한 합성 및 혼합 기능을 추가하였고 쉐입(shape) 재사용을 허용하여 파일 크기를 줄일 수 있다.
이 테이블은 PNG, JPEG, TIFF와 같은 표준 그래픽 형식의 비트맵 데이터에 대한 액세스를 제공한다.
웹에서 널리 사용되며 풍부한 그래픽 기능을 제공하는 SVG 마크업 언어를 사용하여 확장 가능한 컬러 그래픽을 지원하는 장점을 가지고 있다.
features-opentype, features-aat, features-graphite 등과 같은 글꼴 기능 지원 기술을 나타낸다.
[feature-opentype | feature-aat | feature-graphite]
그래파이트(graphite) 테이블 포맷에 문서화된 대로 Silf, Glat, Gloc, Feat 및 Sill 테이블을 사용한다.
증분(incremental) 기술은 range-request 또는 patch-subset 방법을 사용하여 증분 글꼴 로딩을 위한 클라이언트 지원을 의미한다.
팔레트 기술은 글꼴 팔레트에 대한 지원을 말하며 일반적으로 CPAL 테이블과 함께 OPENTYPE and AAT-FEATURES에서 구현된다.
변형(variations) 기술은 글꼴 변형을 지원하는 것을 말하며 일반적으로 OPENTYPE에서 avar, cvar, fvar, gvar, HVAR, MVAR, STAT, VVAR 테이블과 AAT-FEATURES에서 avar, cvar, fvar, gvar 테이블을 사용하여 구현한다.
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>src() 함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
선언된 서체가 지원할 수 있는 유니코드 코드포인트 집합을 정의한다. 디스크립터의 값은 쉼표로 구분된 유니코드 범위(<urange>) 값이다. 이러한 범위의 조합은 지정된 텍스트 실행을 위해 글꼴 리소스를 다운로드할지 여부를 결정할 때 유저 에이전트에게 힌트 역할을 한다.
[작성 언어 및 텍스트 유형(예: 숫자)에 따라 글꼴을 적용]할 때 유용할 수 있다.
<urange>#아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
U+ 또는 u+ 접두사 뒤에 아래 나열된 세 가지 형식 중 하나의 코드포인트 범위로 구성된 UNICODE-RANGE 토큰을 나타낸다. 이러한 형식 중 하나에 맞지 않는 범위는 유효하지 않으며 선언이 무시된다.
U+416U+400-4ff? 문자가 16진수를 나타낼 때 암시되는 코드포인트 집합으로 정의된다.U+4??u '+' <ident-token> '?'* | u <dimension-token> '?'* | u <number-token> '?'* | u <number-token> <dimension-token> | u <number-token> <number-token> | u '+' '?'+
<number> 값이 포함되어 있으며 추가로 'integer' 또는 'number'로 설정된 유형 플래그가 있다. 다르게 설정되지 않은 경우 유형 플래그의 기본값은 'integer'이다. 그리고 하나 이상의 코드 포인트로 구성된 단위가 추가로 있다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Fonts Module Level 4 | 초안 작업 | Last review date: 2022-6-18 |
@font-face로 글꼴을 정의할 때 많은 다양한 디스크립터가 있지만 보통 다음 아래의 디스크립터들을 사용할 수 있다.
@font-face {
font-family: NanumGothic;
font-style: italic;
font-weight: bold;
src: local('NanumGothic'),
url('/webfonts/NanumGothic.eot'), /* IE 6~8 */
url('/webfonts/NanumGothic.woff') format('woff'),
url('/webfonts/NanumGothic.otf') format(‘opentype’),
url('/webfonts/NanumGothic.ttf') format('truetype');
}글꼴로 사용할 이름을 정의한다. 만일 지정할 이름에 공백이 포함되는 경우에는 지정할 이름을 따옴표로 감싼다.
글꼴의 모양을 정의한다. 설정 가능한 값의 종류는 font-style 속성을 참조하길 바란다.
글꼴의 굵기를 지정한다. 설정 가능한 값의 종류는 font-weight 속성을 참고하길 바란다.
사용할 글꼴 파일의 경로를 설정한다. 콤마(,)로 구분하여 글꼴 파일 경로를 목록으로 설정할 수 있으며 목록으로 작성된 순서에 따라 글꼴을 우선적으로 로드한다.
local() 함수는 사용자 기기의 운영 체제에 있는 시스템 글꼴을 사용하도록 한다. 시스템 글꼴이 아닌 경우에 사용할 수 있는 글꼴의 종류는 대표적으로 'woff', 'woff2','otf' 가 있다. 이 글꼴 파일들은 서버에 위치해 url() 함수를 이용해서 스타일시트로 가져와서 사용한다. 이렇게 설정된 글꼴을 사용해서 콘텐츠를 작성하는 경우 사용자의 웹브라우저는 서버로 부터 글꼴을 내려받아 사용한다. 따라서 사용자의 기기에 직접 글꼴을 가지고 있지 않아도 어느 기기이든 일관성이 있는 글꼴로 콘텐츠를 출력할 수 있다.
확장자가 '*.woff', '*.otf'같은 글꼴들을 웹폰트라 부른다. 보통 글꼴 파일은 파일 크기가 크다보니 서버에서 사용자의 기기로 내려받는 시간이 필요하다. 사실 시스템 폰트로 사용되고 있는 대표적인 트루타입 폰트인 '*.ttf'도 웹폰트로 사용할 수 있다. 그러나 파일 크기가 크다보니 웹폰트로 사용하기에는 적절치 않다. 따라서 네트워크에 최적화된 글꼴이 필요하게 되었는데 이러한 이유로 웹폰트라는 특화된 글꼴이 개발되었다.