CSS @font-face

@font-face는 브라우저에 폰트 파일의 위치와 이름을 알려주는 CSS at 규칙입니다. 1997년 IE 4에서 처음 지원되었지만, WOFF가 등장하고 다른 브라우저들이 이 규칙을 일관되게 구현한 2010년경까지는 크로스 브라우저에서 실용적으로 사용하기 어려웠습니다.

아이콘 폰트에서 @font-face는 폰트 파일과 아이콘을 표시하는 CSS 클래스 사이의 접착제입니다. 이것 없이는 브라우저가 font-family: 'MyIcons'가 서버에서 어떤 특정 파일을 로드해야 하는지 알 방법이 없습니다.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

font-family 디스크립터는 나중에 참조할 폰트 이름을 지정합니다. src 디스크립터는 브라우저에 파일을 다운로드할 위치와 형식을 알려줍니다. font-weight와 font-style 디스크립터는 브라우저가 굵기나 이탤릭 변형을 합성하려 하지 않도록 합니다. 그리고 font-display는 폰트 로딩 중 표시 동작을 제어합니다.

각 URL 뒤의 format() 힌트는 브라우저에 파일 형식을 알려주어, 지원하지 않는 형식은 먼저 다운로드하지 않고 건너뛸 수 있게 합니다. 브라우저 지원이 개선되면서 권장 형식 세트는 크게 줄어들었습니다.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

97%+ 브라우저 커버리지로 대부분의 현대 프로젝트에서 WOFF2만으로 충분합니다. 가장 간단하고 성능이 좋은 접근법입니다.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

WOFF를 폴백으로 추가하면 WOFF2를 지원하지 않는 IE 11을 커버합니다. 모던 브라우저는 WOFF2 파일을 가져가고, IE 11은 WOFF로 폴백합니다.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 호환 */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

완전한 "방탄" 스택은 IE 6-8을 위한 EOT, 모던 브라우저를 위한 WOFF2, IE 9-11을 위한 WOFF, 그리고 최종 폴백으로 TTF를 포함합니다. 브라우저는 각 src 항목을 순서대로 시도하고 지원하는 첫 번째 형식을 사용합니다. 이 접근법은 극단적인 레거시 요구사항을 가진 프로젝트에서만 필요합니다.

아이콘 폰트의 표준 패턴은 font-family와 공유 렌더링 스타일을 설정하는 베이스 클래스와, ::before 가상 요소의 content에 각 아이콘의 Unicode 코드 포인트를 설정하는 개별 아이콘 클래스를 사용합니다.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

베이스 클래스는 폰트 스타일을 리셋하여 브라우저가 아이콘을 왜곡시킬 수 있는 굵기, 이탤릭, 기타 변환을 적용하지 않도록 합니다. -webkit-font-smoothing과 -moz-osx-font-smoothing 속성은 macOS와 iOS에서 안티앨리어싱을 활성화하여 더 선명한 렌더링을 제공합니다.

각 아이콘 클래스는 해당 글리프에 할당된 Unicode 코드 포인트를 가진 ::before 가상 요소를 설정합니다. 백슬래시 E 표기법(\E001)은 CSS가 16진수 코드 포인트로 Unicode 문자를 참조하는 방식입니다.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

<i>와 <span> 모두 동일하게 작동합니다. 요소 자체는 비어있고——아이콘은 완전히 ::before 가상 요소에 의해 렌더링됩니다.

font-display 디스크립터는 폰트 파일이 아직 다운로드 중일 때 브라우저가 무엇을 표시할지 제어합니다. 이는 아이콘 폰트에 매우 중요한데, 잘못된 설정이 페이지 로드 중 아이콘을 보이지 않게 만들 수 있기 때문입니다.

아이콘 폰트에는 swap이 권장 선택입니다. 스타일 없는 콘텐츠가 잠깐 깜빡이는 것(아이콘 코드 포인트가 사각형이나 빈 공간으로 보일 수 있음)이 아이콘이 완전히 보이지 않는 것보다 훨씬 낫습니다. block을 사용하면 사용자가 느린 연결에서 아이콘이 있어야 할 곳이 최대 3초 동안 비어 있는 것을 볼 수 있어 페이지가 깨진 것처럼 보입니다. swap을 사용하면 폰트가 로드되자마자 아이콘이 나타나고, 현대 연결에서는 이 전환이 거의 느껴지지 않습니다.

폰트 파일은 기본적으로 렌더링을 차단합니다——브라우저는 파일이 다운로드될 때까지 커스텀 폰트로 텍스트를 그리지 않습니다. 영향을 최소화하는 기법들입니다:

• 폰트 파일 프리로드——<link rel="preload">를 사용하여 브라우저가 폰트를 참조하는 CSS를 파싱하기 전에 최대한 일찍 폰트 다운로드를 시작합니다.
• 폰트 자체 호스팅——HTML과 동일한 오리진에서 폰트 파일을 제공하면 추가 DNS 조회와 연결 설정을 피할 수 있고 CORS 문제도 없어집니다.
• 폰트 서브셋화——사용하지 않는 아이콘을 제거하여 파일 크기를 줄입니다. 500개 아이콘 중 50개만 사용하는 폰트는 다운로드의 90%를 낭비하고 있습니다.
• unicode-range 사용——여러 아이콘 세트가 있는 경우 이 디스크립터는 지정한 범위의 문자가 실제로 페이지에서 사용될 때만 브라우저가 폰트 파일을 다운로드하도록 지시합니다.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

동일 오리진 폰트에도 crossorigin 속성이 필요합니다——이것은 폰트 로딩 명세의 특이 사항입니다. 없으면 브라우저가 폰트를 두 번 다운로드합니다: 프리로드 힌트에서 한 번(CORS 없이)과 @font-face 규칙에서 한 번(CORS 포함).

• CORS 오류——다른 오리진(예: CDN 서브도메인)에서 제공되는 폰트 파일은 서버에 Access-Control-Allow-Origin 헤더가 필요합니다. 또는 <link> 태그에 crossorigin 속성을 사용합니다. 적절한 CORS 설정이 없으면 브라우저는 폰트를 조용히 차단합니다.
• 아이콘이 사각형이나 직사각형으로 표시됨——보통 폰트 파일 경로가 잘못되었거나, 폰트가 아직 로드되지 않았거나, 아이콘 클래스의 font-family 이름이 @font-face 선언의 이름과 일치하지 않는다는 의미입니다. 브라우저 네트워크 탭에서 폰트 파일이 200 상태로 로드되었는지 확인하세요.
• 아이콘이 잘못된 글리프로 표시됨——시스템 폰트와의 Unicode 코드 포인트 충돌. 아이콘 폰트가 일반적인 시스템 폰트와 겹치는 범위의 코드 포인트를 사용하면 브라우저가 시스템 문자를 렌더링할 수 있습니다. 아이콘 폰트는 보통 이를 피하기 위해 사용자 정의 영역(U+E000 ~ U+F8FF)을 사용합니다.