이 글은 초보자부터 가장 경험 많은 웹 개발자까지 모든 분에게 적합합니다. 수십 년 경력의 시니어 웹 개발자들이 폰트를 무시하고 제대로 다루지 않는 것을 봐왔으니, 계속 읽어주세요.

아래 몇 줄을 읽고 나면 모든 브라우저에서 올바르게 작동하는 정확한 @font-face와 CSS를 사용하게 될 것입니다.

웹사이트가 모든 기기에서 기대한 대로 보이고 작동할 것입니다.

Font Face란?

이것을 이미 알고 계실 거라 가정합니다. 그렇지 않다면 이 글을 읽고 있지 않을 테니까요.

하지만 정보 차원에서, @font-face는 원격 사용자가 시스템에 설치하지 않아도 특정 폰트를 웹사이트에 임베드할 수 있게 해줍니다.

사용 가능한 폰트 유형은: “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot”, “.svg"입니다.

  • .woff는 Web Open Font Format의 약자
  • .woff2는 WOFF 2.0 - Web Open Font Format의 약자
  • .ttf, .otf는 TTF/OTF - TrueType과 OpenType의 약자
  • .eot는 EOT - Embedded OpenType의 약자
  • .svg는 SVG 폰트의 약자

각 브라우저마다 이러한 유형에 대한 “고유한” 지원이 있어(안타깝게도) 이를 고려해야 합니다.

모든 기기와 브라우저에서 페이지가 동일하게 보이려면 위의 모든 포맷이 필요합니다.

Font Face를 올바르게 사용하는 방법

여기가 까다로운 부분입니다. 구글에서 검색해도 최상위 웹사이트조차 냉혹한 현실을 보여주지 않기 때문입니다.

위에서 언급했듯이 각 브라우저마다 고유한 폰트 지원이 있으며, 모든 브라우저에서 폰트가 작동하려면 필요한 폰트 유형을 로드하고 CSS를 그에 맞게 조정해야 합니다.

예를 들어 Mozilla 를 확인하면 다음과 같습니다:

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

충분할까요? 아닙니다. 모든 브라우저에서 작동하지 않습니다. 예를 들어 Internet Explorer에서는 전혀 작동하지 않습니다.

https://caniuse.com/?search=woff2 에서 직접 확인할 수 있습니다.

또 다른 예로 W3 Schools 를 확인하면:

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

이것이 올바를까요? 여전히 아닙니다. 모든 브라우저를 지원하지 않습니다.

모든 브라우저를 지원하려면 로드하는 폰트 유형과 CSS가 다음과 같아야 합니다:

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

각 폰트 유형의 주석을 확인하세요. 자명합니다. 이렇게 하면 모든 브라우저를 지원하고 폰트가 올바르게 표시됩니다.

Font Face 유형을 변환하고 생성하는 방법

클라이언트를 위해 웹사이트를 개발할 때 보통 하나의 폰트 유형을 받습니다. .otf 또는 .ttf 포맷만 있는 경우가 많은데, 이것만으로는 충분하지 않습니다.

모든 브라우저에 필요한 모든 포맷이 필요하므로 적절한 @font-face 유형으로 변환해야 합니다.

다행히 이를 자동으로 수행하고 올바른 CSS도 생성해주는 온라인 도구가 있습니다(진화했는지 아닌지).

유료/커스텀 폰트 변환

Transfonter 사용을 권장하지만 물론 원하는 것을 사용할 수 있습니다.

이 무료 온라인 도구는 폰트를 변환하고 바로 사용할 수 있는 폰트 유형과 CSS를 제공합니다:

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

무료/오픈소스 폰트 변환

클라이언트가 유료 폰트 대신 무료 Google Font를 제공하는 경우에도 도구가 있습니다: https://google-webfonts-helper.herokuapp.com/fonts .

이 도구도 모든 브라우저에서 폰트를 올바르게 표시하는 데 필요한 유형과 CSS를 생성합니다.

결과 폰트를 다양한 브라우저에서 검사하는 것을 강력히 권장합니다.

Font Family를 올바르게 사용하는 방법

font family 사양을 최적으로 사용한 적이 없다고 확신합니다. 올바른 font face를 로드하는 것만으로는 충분하지 않으며, 폴백 폰트도 지정해야 합니다.

폴백 폰트는 현재 폰트를 사용할 수 없을 때 사용됩니다. CDN 문제나 네트워크 타임아웃 등 여러 이유로 발생할 수 있습니다.

대부분의 CMS가 다음과 같이 폴백 폰트를 정의한 것을 볼 수 있습니다:

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

충분할까요? 아닙니다. 안타깝게도 시스템 폰트는 모든 기기에서 같지 않습니다. Windows에는 고유한 것이 있고, Android에도, iOS에도 있습니다.

그러면 어떻게 해야 할까요? 적절히 선언하세요. Bootstrap 이 어떻게 하는지 보세요:

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

커스텀 폰트와 함께 위 내용을 사용하면 결과는 다음과 같습니다:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

이것이 폴백 폰트를 다루는 깔끔한 방법으로, 폰트가 로딩되는 동안(또는 전혀 로딩되지 않는 경우에도) 모든 기기에서 웹사이트가 매끄럽게 보이도록 보장합니다.

Font Face와 Font Family 테스트

테스트라는 단어에 겁먹지 마세요. 스마트하게 작업하면 매우 간단한 과정입니다. 어떤 폰트가 로드되었는지 확인하기 위해 페이지를 수동으로 검사할 필요도 없습니다(게으르다면).

기술이 발전함에 따라 개발자가 사용할 수 있는 도구도 발전하여 것들을 만드는 것이 점점 더 쉬워지고 있습니다.

@font-face와 font-family가 올바르게 로드되는지 확인하는 것은 매우 간단한 과정입니다. 아래를 참조하세요.

Font Face와 Font Family 확인

  1. 브라우저 확장 프로그램을 사용하여 사이트가 사용하는 폰트를 쉽게 확인:
  1. 페이지를 편집하고 @font-face를 “깨뜨려” 커스텀 폰트가 로드되지 않는 경우를 시뮬레이션합니다. 폰트 이름이나 URL을 존재하지 않는 폰트로 변경하여 로딩을 “깨뜨릴” 수 있습니다.
  2. 결과는 기기에 맞는 첫 번째 폴백 폰트여야 합니다. 예를 들어 Apple 기기에서는 “-apple-system"이어야 합니다.

팁과 트릭

  • CDN에서 폰트를 로드하는 경우 “preconnect” HTML 링크 헤더 태그를 사용하세요.
  • 모든 폰트 선언에 font-display: swap;을 추가하여 로딩을 가속화하세요. 이는 커스텀 폰트가 완전히 다운로드될 때까지 폴백 폰트를 사용하여 텍스트를 표시하도록 브라우저에 지시합니다.
  • 실제로 필요한 폰트만 로드하세요. 같은 폰트의 7가지 유형을 로드하고 하나만 사용하는 사람을 본 적 있습니다.
  • 페이지 속도를 개선하기 위해 HTTP/2를 사용하여 (첫 번째 또는 필요한) 폰트를 프리로드하세요. 이는 페이지를 상당히 가속화하고 Google PageSpeed “Ensure text remains visible during webfont load” 문제를 수정합니다.

이상입니다. 이 글이 도움이 되었기를 바랍니다.