[HTML|CSS] Font format과 font-face 선언 및 적용법

CSS!

이번 포스팅에서는 Font format의 종류와 font-face 선언 방법, 적용법을 알아봅시다.

Font format의 종류

포맷과 종류별 특징

포맷	포맷별 특징
TrueType Fonts (TTF)	- 가장 일반적인 글꼴 형식 - 대부분의 브라우저가 지원
OpenType Fonts (OTF)	- TTF를 기반으로 제작된 글꼴 형식 - TTF와 비슷하지만, TTF에서 지원하지 않는 최신 기능을 사용 가능
The Web Open Font Format (WOFF)	- OTF와 TTF로 이루어져 있는 압축된 글꼴 형식 - 압축되어 있어 가볍고 다운 받는 속도가 빠름 - W3C 권장 사항
The Web Open Font Format (WOFF 2.0)	- WOFF보다 더 향상된 압축을 제공하는 글꼴 형식
SVG Fonts/Shapes (SVG)	- Vector 기반의 그래픽을 사용하는 SVG로 만들어진 글꼴 형식
Embedded OpenType Fonts (EOT)	- IE에서 동작하는 글꼴 형식

브라우저별 포맷 지원 현황

Format	IE	Chrome	Firefox	Safari	Opera
WOFF2	14.0	36.0	39.0	10.0	26.0
WOFF	9.0	5.0	3.6	5.1	11.1
SVG	X	X	X	3.2	X
TTF/OTF	9.0	4.0	3.5	3.1	10.0
EOT	6.0	X	X	X	X

Woff 포맷의 경우 압축률이 가장 좋아 권장되는 사항이지만, 최신 브라우저 이외의 낮은 브라우저를 지원하실 예정이라면 다른 포맷과 함께 사용해 주시는 것이 좋습니다.

Font face 설정

Font 경로에 대문자를 넣으면 IE에서 원치 않는 결과가 나타날 수 있습니다.

Font face란

font face란 사용자가 갖고 있지 않은 폰트도 특정 경로로 연결시켜 다운 받아 사용받을 수 있게 정의해 주는 것을 말합니다.

Font face 정의 방법

@font-face {
    font-family: "AnyTestFont";
    src: local("AnyTestFont"), url("AnyTestFont_경로.eot?#iefix") format("embedded-opentype"),
          url('AnyTestFont.woff') format('woff'),
          url('AnyTestFont.otf') format('opentype'),
          url('AnyTestFont.svg') format('svg');
    font-weight: 500;
    font-style: normal;
}

font-family

선언하고자 하는 폰트의 이름을 정의합니다.

src

폰트가 정의되어 있는 경로를 설정할 수 있습니다. local과 url을 사용하여 설정할 수 있습니다.

• local위 코드처럼 우선적으로 local로 찾게 되면, 사용자가 이미 다운받은 폰트를 불필요하게 또 다운받는 일이 없게 됩니다.
• 웹을 사용하는 사용자의 컴퓨터에 설치되어 있는 폰트 중에서 설치하고자 하는 폰트를 찾습니다.
• url브라우저별로 지원하는 포맷이 다르므로, 효율적으로 웹 폰트를 사용하려면 특정한 순서를 지켜주는 것이 중요합니다.
  자세한 내용은 아래에서 좀 더 자세하게 기술합니다.
• 특정한 주소에서 폰트를 네트워크에서 다운받아 사용합니다.

font-weight (Optional)

정의하고자 하는 font의 weight를 지정해줍니다.

다음의 값이 들어갈 수 있습니다. normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-style (Optional)

정의하고자 하는 font의 style을 지정해줍니다.

다음 값을 넣을 수 있습니다: normal | italic | oblique

브라우저별 폰트 설치 최적화

위의 코드에서 눈에 띄는 부분은 ?#iefix 라는 부분인데요. 확장자만 다르고 경로는 같은 폰트 파일을 왜 저렇게 기술한 것이고,

위에서 언급한 특정한 순서라는건 무엇인지 알아보겠습니다.

src 경로 순서

src 값에 기술된 폰트 설치 경로들은 위부터 아래, 기술된 순서대로 사용자의 브라우저에 부합하는 포맷의 폰트를 다운 받게 됩니다.

순서대로 다운 받는 중, 사용자의 브라우저에서 지원되는 폰트 포맷을 다운 받게 되면 그때부턴 다운받지 않습니다.

그래서 woff2나 woff와 같은 최신 포맷을 사용하지 못하는 8 이하의 IE 브라우저를 위한 다운 경로를 최상단에 위치하게 됩니다.

이렇게 낮은 버전의 IE의 경우 eot 포맷을 제외한 불필요한 다른 포맷을 거치지 않게 하고, 그 다음 순서는 최신 브라우저들을 위한 내용으로 가장 경량화된 woff2 부터 기술하여 다운 받게 만드는 것입니다.

보통 아래와 같은 순서대로 기술하는 것이 좋습니다.

1. local (사용자 환경에서 찾기)
2. eot
3. woff2/ woff
4. ttf
5. svg

?#iefix

순서대로 사용자의 브라우저에 맞는 포맷의 폰트 파일을 탐색하여 다운 받을때 IE 8 이하에서 일어나는 버그를 위한 코드입니다.

IE 8 이하에서는 embedded-opentype 포맷의 파일을 찾지 못하고 다른 포맷의 파일을 다운받게 되는 버그가 있어, 쿼리 스트링을 사용하여 다른 경로의 파일을 다운 받지 않게 합니다. (다른 브라우저들의 경우, 지원하지 않는 포맷의 파일을 건너뛰게 됩니다.)

참조 문서

CSS Web Fonts