@font-face - by. UXKM

Publishing
CSS
CSS 중급
@font-face

요약 설명
@font-face에서는 웹 폰트(web font)를 정의할 때 사용하는 @font-face 규칙에 대한 내용을 다루고 있습니다.

웹 폰트는 사용자가 폰트를 설치하지 않아도 디자이너가 원하는 타이포그래피를 웹 페이지에 구현할 수 있게 하는 기술입니다.
웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하면, 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 다운로드하여 해당 글꼴을 표시합니다.

CSS3에서 @font-face 규칙을 사용하려면 다음과 같이 지정해야 합니다.

font-family : 사용할 웹 폰트의 이름을 지정합니다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없지만, 비슷하게 설정하는 것이 유지 보수에 좋습니다.
src : 폰트 파일의 경로와 폰트의 형식을 지정합니다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정합니다.

@font-face 규칙을 설정한 다음 웹 폰트가 필요한 선택자(selector)의 font-family 속성에서 사용할 웹 폰트의 이름을 호출해 사용합니다.
만약 웹 폰트 로딩이 실패하면 다음에 선언된 폰트가 렌더링됩니다. 이 폰트를 폴백 폰트(fallback font)라고 합니다.

웹 글꼴의 형식

웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같습니다.

트루 타입 글꼴(TrueType Fonts, TTF)
TrueType은 1980년대 후반 Apple과 Microsoft에서 개발한 글꼴 표준으로, Mac OS 및 Microsoft Windows 운영 체제에서 가장 일반적인 글꼴 형식입니다.

트루 타입 글꼴은 다양한 글꼴 크기에서 어떻게 표현될지에 대한 수준 높은 제어를 할 수 있게 해줍니다.

OTF/TTF 형식은 쉽게 복제될 수 있어(불법으로) 대신 WOFF 형식이 만들어졌으며, Internet Explorer에서 글꼴 형식은 "설치 가능"으로 설정된 경우에만 작동합니다.
오픈 타입 글꼴(OpenType Fonts, OTF)
OpenType은 확장 가능한 컴퓨터 글꼴 형식으로, TrueType을 기반으로 하며 Microsoft의 등록 상표입니다.

트루 타입 글꼴의 뒤를 잇기 위해 Microsoft에서 개발하였으며, 현재는 거의 모든 컴퓨터에서 사용되고 있습니다.

오픈 타입 글꼴은 유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있다는 장점을 가지고 있습니다.

OTF/TTF 형식은 쉽게 복제될 수 있어(불법으로) 대신 WOFF 형식이 만들어졌습니다.
웹 오픈 글꼴(The Web Open Font Format, WOFF)
WOFF는 웹 페이지에서 사용하기 위한 글꼴 형식으로, 2009년에 개발되었으며 현재 W3C에서 사용을 권장하고 있는 글꼴 표준입니다.

모질라와 다른 조직들이 결합하여 웹에서 사용할 목적으로 개발했으며, 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴입니다.

OTF/TTF를 이용한 구조의 압축된 버전으로, 다른 글꼴 형식보다 빠르게 로드됩니다.
웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)
WOFF 2.0은 웹 오픈 글꼴 1.0 버전보다 더 나은 압축률을 제공하는 트루 타입 또는 오픈 타입 글꼴입니다.

WOFF보다 약 30% 더 작은 파일 크기를 제공하여 웹 폰트 로딩 속도를 향상시킬 수 있습니다.
SVG 글꼴(SVG Fonts/Shapes)
SVG/SVGZ (Scalable Vector Graphics Font)이며, SVGZ는 SVG의 압축된 버전입니다.

SVG 글꼴은 SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 표준으로, 텍스트를 표시할 때 SVG를 글리프로 사용할 수 있습니다.

SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라 @font-face 규칙도 적용할 수 있게 해줍니다.

SVG 글꼴은 거의 항상 @font-face 소스 목록의 맨 아래에 와야 합니다. 다른 것을 사용할 수 없으면 브라우저가 SVG 글꼴을 사용하지 못하게 합니다.

크롬 브라우저는 4-37까지만 지원하고 38+부터는 지원하지 않으며, 오페라 브라우저는 10-24까지만 지원하고 25+부터는 지원하지 않습니다.

현재 SVG font를 지원하는 브라우저는 Safari(3.2+)와 iOS Safari(3.2+)만 유일합니다.
임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT)
임베디드 오픈 타입 글꼴은 Microsoft가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴입니다.

Internet Explorer 8 이하 버전은 @font-face를 사용할 때 .eot 파일만 인식합니다.

CSS3 @font-face 규칙 속성

								/* 아래 속성을 모두 적용 한 예제 */
								@font-face {
									font-family: 'MyWebFont';
									src: url('webfont.eot'); /* IE9 Compat Modes */
									src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
										 url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
										 url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
										 url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
										 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
									font-weight: normal;
									font-stretch : normal;
									font-style : normal;
									unicode-range: U+d3bf-d3c7, U+d3ca-d3cf, U+d3d1-d3eb, U+d3ee-d3ef, U+d3f1-d3f3, U+d3f5-d3fb, U+d3fd-d400, U+d402-d45b, U+d45d-d463;
								}

font-family

필수적이며, 글꼴의 이름을 설정합니다.

									@font-face {
										font-family: '적용할 폰트 이름 지정';
									}

src

필수적이며, 글꼴 파일의 주소를 설정합니다.
권장 사항으로는 항상 글꼴 URL에 소문자를 사용해야 하며, 대문자로 사용할 경우 Internet Explorer에서 예기치 않은 결과를 줄 수 있습니다.

									@font-face {
										src: url('적용할 폰트 경로/폰트명') format('폰트 포멧');
									}

font-weight

선택적이며, 글꼴의 굵기를 설정합니다. 기본값은 normal입니다.

									@font-face {
										font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
									}

font-stretch

선택적이며, 글꼴의 크기가 늘어나는 방법을 설정합니다. 기본값은 normal입니다.

									@font-face {
										font-stretch : normal | condensed | ultra-condensed | extra-condensed | semi-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded;
									}

font-style

선택적이며, 글꼴의 스타일을 설정합니다. 기본값은 normal입니다.

									@font-face {
										font-style : normal | italic | oblique;
									}

unicode-range

선택적이며, 글꼴이 지원하는 유니코드 문자의 범위를 설정합니다. 기본값은 U+0-10FFFF입니다.

유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성으로, 예를 들어 영어, 그리스어 및 일본어에 대해 별도의 글꼴 리소스를 제공할 수 있습니다.
영어 버전의 페이지를 보는 사용자의 경우 그리스어 및 일본어 글꼴의 글꼴 리소스를 다운로드할 필요가 없어 대역폭이 절약됩니다.

모든 유니코드 문자 코드 또는 범위는 허용 가능한 unicode-range 값입니다. 유니코드 포인트 앞에는 U+ 문자 코드를 구성하는 최대 6개의 문자가 옵니다.
이 형식을 따르지 않는 점 또는 범위는 유효하지 않은 것으로 간주하며 속성이 무시됩니다.
기본 라틴어(0020—007F)는 영어 사이트에서 가장 일반적인 범위일 수 있지만, unicode-table.com에서 사용 가능한 유니코드를 참조하여 사용할 수 있습니다.

									@font-face {
										unicode-range:
											/* 영문 */
											U+0020-U+0020, U+0041-U+005A, U+0061-U+007A,
											/* 숫자 */
											U+0030-U+0039, U+002E-U+002E,
											/* 한글 */
											U+0020-U+007E, U+1100-U+11F9, U+3000-U+303F, U+3131-U+318E, U+327F-U+327F, U+AC00-U+D7A3, U+FF01-U+FF60,
											/* 라틴 */
											U+0020-U+002F, U+0030-U+0039, U+003A-U+0040, U+0041-U+005A, U+005B-U+0060, U+0061-U+007A, U+007B-U+007E;
									}

									unicode-range: U+26;                /* 단일 문자(single codepoint) */
									unicode-range: U+0-7F;
									unicode-range: U+0025-00FF;         /* 문자 범위(codepoint range) */
									unicode-range: U+4??;               /* wildcard range */
									unicode-range: U+0025-00FF, U+4??;  /* multiple values */
									/*
									와일드 카드 범위는 유니코드 범위 중 복잡합니다.
									각각 ?은 값이 일치하는 와일드 카드를 나타냅니다.
									?로 시작 하는 문자 코드는 0을 의미하므로 최대 6개의 총 문자를 허용하는 유니코드에도 불구하고 최대 5개의 물음표 문자를 사용할 수 있습니다.
									*/

요약 설명

Google은 머신 러닝에 기반을 둔 최적화 기술을 통해 한글 문서에서 주제에 따라 사용되는 글자의 패턴을 발견했습니다.
그 패턴에 따라 한글 폰트를 100여 가지의 그룹으로 나누고 unicode-range 속성을 사용합니다.
이렇게 하면 사용자가 웹 페이지를 로딩할 때 폰트 전체를 다운로드하지 않고 웹 페이지에서 사용할 문자에 필요한 폰트만 선택적으로 다운로드하여, 크기가 큰 한글 폰트를 동적으로 분할 다운로드하는 방법으로 용량을 최적화할 수 있습니다.

font-display

font-display 속성을 사용하면 외부 라이브러리 없이 웹 폰트의 로딩 상태에 따른 동작을 설정할 수 있습니다.
현재 Internet Explorer는 지원하지 않습니다.

									@font-face {
										font-display : auto | block | swap | fallback | optional;
									}

auto
브라우저의 기본 동작을 따릅니다.
block
FOIT 방식(Flash Of Invisible Text)과 동일하게 작동하는 옵션입니다.

웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링하지 않으며(최대 3초), 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다.

[font-display : block 작동 방식]
swap
FOUT 방식(Flash Of Unstyled Text)과 동일하게 작동하는 옵션입니다.

우선 폴백 폰트로 글자를 렌더링하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보입니다.

[font-display : swap 작동 방식]
fallback
우선 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링합니다.

약 2초의 전환(swap) 시간이 있으며, 이 시간 안에 로딩이 완료되면 웹 폰트로 전환합니다. 하지만 이 시간이 지나면 웹 폰트 다운로드가 완료되어도 웹 폰트로 전환하지 않고 폴백 폰트를 유지합니다.

전환 시간 이후에 다운로드된 웹 폰트는 웹 페이지에 적용되지는 않지만 캐시에는 저장되어, 추후에 사용자가 다시 방문했을 때 바로 웹 폰트가 적용됩니다.
optional
optional 옵션은 fallback 옵션과 비슷하지만 다르게 작동합니다.

우선 100ms 동안 텍스트가 보이지 않고 그 후 폴백 폰트로 전환합니다. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정합니다.

예를 들어 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않습니다.

[font-display : optional 작동 방식]

웹 폰트 브라우저의 렌더링 차단 처리 방식

웹 폰트가 적용될 때는 텍스트의 번쩍임(flash of text)이 일어납니다.
렌더링 방식은 Internet Explorer 계열 브라우저의 처리 방식과 그 외 최근 브라우저의 처리 방식으로 나눌 수 있습니다.

Internet Explorer 계열 브라우저는 FOUT 방식(Flash Of Unstyled Text)으로 렌더링 차단을 처리하고, 그 외의 브라우저는 FOIT 방식(Flash Of Invisible Text)으로 렌더링 차단을 처리합니다.
FOUT 방식은 웹 폰트가 적용되지 않은 폴백 폰트 상태(unstyled)에서 폰트가 바뀌면서 텍스트 번쩍임이 일어나는 방식이며, FOIT 방식은 웹 폰트가 적용되지 않은 텍스트가 보이지 않는 상태(invisible)에서 폰트가 바뀌면서 텍스트 번쩍임이 일어나는 방식입니다.

FOUT 방식(Flash Of Unstyled Text)
Internet Explorer와 Edge는 웹 폰트가 로딩될 때까지 우선 폴백 폰트로 텍스트를 렌더링하고, 웹 폰트 로딩이 완료되면 텍스트를 웹 폰트로 전환합니다.

이 방식은 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이는 장점이 있지만, 글꼴의 자간, 높이 등 서식이 달라 웹 폰트 적용 전과 후에 레이아웃이 변경될 수 있습니다.
FOIT 방식(Flash Of Invisible Text)
Chrome, Firefox, Safari 등의 브라우저는 웹 폰트가 로딩되기 전까지 해당 텍스트를 화면에 보여주지 않습니다.

웹 폰트 로딩이 완료되면 텍스트를 웹 폰트로 전환하며, 한 번에 웹 폰트를 보여줄 수 있다는 장점이 있지만, 웹 폰트의 로딩이 늦으면 빈 텍스트가 노출되는 문제점이 있습니다.

웹 폰트가 로딩되지 않은 상태로 3초가 지나면 폴백 폰트로 우선 렌더링하여 브라우저 자체적으로 웹 폰트의 로딩 시간이 과도하게 오래 걸리는 상황에 대비합니다.

구형 Safari의 경우는 시간 제한 없이 FOIT로 웹 폰트를 기다렸다가, 60초가 넘으면 응답 자체가 취소되기 때문에 콘텐츠 자체를 볼 수 없는 원인이 되기도 하였지만, 최근에는 timeout을 적용하였습니다.
FOUT 방식으로 최적화
FOIT 방식은 텍스트가 보이지 않는 문제가 있기 때문에 UX 관점에서 좋지 않습니다. 모든 브라우저에서 FOIT 방식이 아닌 FOUT 방식으로 작동하게 한다면 텍스트가 보이지 않는 문제를 해결할 수 있습니다.
font-display 속성으로 최적화
텍스트가 항상 보이게 하려면 FOUT와 동일하게 작동하는 swap 옵션을 사용합니다.

fallback 옵션과 optional 옵션을 사용하면 100ms 동안 텍스트가 보이지 않지만 매우 짧은 시간이어서 이 옵션들도 최적화에 사용할 수 있습니다.

font-display 속성은 Internet Explorer 계열 브라우저를 제외한 브라우저가 지원하므로, 텍스트가 보이지 않는 문제가 발생하는 브라우저에서는 문제없이 최적화에 사용할 수 있습니다.

font-display : block 작동 방식 — [FOIT / FOUT 각 브라우저 동작 방식]