웹폰트 사용하기

폰트를 선택했다면 웹사이트에 적용해보자. 웹폰트는 @font-face 규칙을 통해 CSS에서 정의한다. 웹 개발자들은 @font-face 규칙을 직접 작성해본 혹은 복사해 붙여넣기라도 해본 경험이 있을 것이다. 그게 아니라도 최소한 본 적은 있을 것이다. 그래도 완벽하게 내 것으로 만들기 위해 기본 예제를 빠르게 실행해보자.

이렇게 @font-face 규칙을 선언하면 새로운 웹폰트 패밀리가 만들어진다. 이제 font-family 속성 혹은 약칭 표기법인 font 속성을 통해 이 웹폰트 패밀리를 참조할 수 있다. 하지만 아직 할 일이 더 남아있다. 폰트 모음에 있는 웹폰트를 참조할 때에는 그 웹폰트가 제대로 로드되지 않을 경우에 대비해, 최소한 한 개의 보호용(fallback) 폰트를 반드시 포함해 두어야 한다. 여기에서는 만약 ‘엘레나’ 폰트가 로드되지 않을 경우 브라우저가 더 넓은 범위의 폰트 패밀리인 serif로 후퇴(fall back)하여, 해당 엘리먼트를 serif 폰트로 표시하게 된다.

보호용 폰트에 대해서는 3장에서 더 자세히 논의할 것이다. 보호용 폰트를 사용하여 사이트가 더 빠르게 로드되는 것처럼 보이게 만드는 방법도 그때 함께 알아보겠다. 지금은 코드를 간결하게 하기 위해서 그냥 일반적인 serif 혹은 sans-serif 폰트 패밀리만을 보호용 폰트로 설정하자. (역자 주: ‘엘레나’ 폰트는 serif 계열에 속하므로 보호용 폰트로 serif를 설정한다. 자신이 사용하고자 하는 폰트 패밀리가 만약 sans-serif 계열에 속한다면 보호용 폰트로 sans-serif를 설정하는 것이 일반적이다.)

 

폰트 패밀리

동일한 폰트 패밀리에서 다양한 스타일을 사용하고 싶다면? 그럴 때는 각 스타일마다 @font-face 규칙을 하나씩 선언하면서, 각 규칙의 font-family 이름은 전부 동일하게 설정한다. 아래의 @font-face 규칙에서는 동일한 폰트 패밀리의 보통 서체(normal)와 굵은 서체(bold), 두 가지 스타일을 선언했다.

이제 CSS 선택자 안에서 폰트 패밀리 이름(font-family)과 적절한 웨이트(font-weight)를 참조하여 이 폰트 패밀리를 사용하면 된다. 아래 코드는 p 엘리먼트에 보통 서체를 적용하고, p에 속한 stron 엘리먼트에는 굵은 서체를 적용한다.

@font-face 규칙 안에는 font-weight 속성 외에도 font-style 속성과 font-stretch 속성을 기술할 수 있다. font-style 속성은 이탤릭체(italic)와 같은 스타일을, font-stretch 속성은 서체의 폭(condensed / expanded)과 같은 스타일을 규정한다. 하나의 폰트 패밀리로 다양한 스타일을 내고자 할 때 이 세 가지 속성을 조합하면 된다. 그러면 이론적으로는 하나의 폰트 패밀리에서 243개의 스타일(font-weight 속성값 9개 X font-style 속성값 3개 X font-stretch 속성값 9개)이 나올 수 있다. 그러나 현실적으로는 27개 스타일로 한정된다. 몇몇 브라우저가 font-stretch 속성을 지원하지 않기 때문이다. (표 2.1 참조)

 

인터넷 익스플로러 8	인터넷 익스플로러 9-11	엣지	크롬	파이어폭스	사파리	오페라	안드로이드 시스템 브라우저
No	Yes	Yes	Yes	Yes	No	Yes	No

표 2.1: 이 글을 쓰는 시점의 font-stretch 속성에 대한 브라우저 지원 여부 (이 글을 읽는 시점의 지원 여부 혹은 브라우저 버전에 따른 지원 여부를 알고 싶다면 여기를 보자.)

 

운이 따라준다면 지금은 지원하지 않는 브라우저들도 조만간 font-stretch 속성을 지원할 것이고, 그러면 우리는 243개 조합을 전부 사용할 수 있을 것이다.

 

폰트 포맷

src 속성 기술자는 브라우저에게 폰트 파일의 위치를 알려준다. 지금까지의 예제에서는 단 하나의 폰트 포맷만을 사용했지만(역자 주: woff 포맷만을 사용했다), 앞으로 우리는 여러 개의 URL로 다양한 폰트 포맷을 지정하는 모습을 자주 보게 될 것이다. URL 뒤에는 ‘포맷 힌트'(format hint)를 덧붙일 수도 있다. 포맷 힌트는 format("값") 구문을 사용하여 URL 뒤에 붙는다. 포맷 힌트는 주어진 URL이 가리키는 폰트 파일의 포맷이 무엇인지를 브라우저에게 알려준다.

여러 개의 포맷을 열거해 놓으면 최신 브라우저들은 일단 포맷 힌트를 보고서, 지원 가능한 포맷 중 가장 앞에 나온 포맷을 선택한다. 그러므로 웹폰트 포맷을 열거할 때는 압축률이 우수한 순서대로 열거하는 것이 중요하다. 포맷 힌트는 작성하지 않아도 상관없지만, 그래도 항상 작성하도록 하자. 포맷 힌트를 작성해 놓으면 브라우저가 해당 폰트를 다운로드 하지 않고도 그 포맷을 미리 알 수가 있다. 예를 들어 어떤 브라우저가 WOFF2는 지원하지 않으면서 WOFF는 지원한다면, 이 브라우저는 포맷 힌트만 보고서 WOFF2 폰트 파일은 그냥 지나쳐버리면 되는 것이다.

브라우저들이 지원하는 웹폰트 포맷에는 OpenType \(TrueType), EOT, WOFF, WOFF2 등이 있다. 일부 브라우저는 SVG 폰트 역시 지원하지만, SVG 폰트는 이제 비인가(deprecated)된 포맷이므로 더 이상 사용하지 말아야 한다. (새로 등장한 OpenType-SVG 포맷과 혼동하지 않도록 하자.) 사실 EOT, WOFF, WOFF2는 기술적으로 봤을 때 폰트 포맷이라고 할 수는 없다. 이것들은 모두 OpenType 파일을 압축한 것으로, 단지 압축률을 저마다 다르게 했을 뿐이다. 압축률은 WOFF2가 가장 좋고, 그 다음 WOFF, EOT 순이다. (표 2.2 참조)

 

포맷	인터넷 익스플로러 8	인터넷 익스플로러 9-11	엣지	크롬	파이어폭스	사파리	오페라	안드로이드 시스템 브라우저
WOFF2	No	No	Yes	Yes	Yes	Yes	Yes	No
WOFF	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Open Type	No	Yes	Yes	Yes	Yes	Yes	Yes	Yes
EOTF	Yes	Yes	No	No	No	No	No	No

표 2.2: 이 글을 쓰는 시점의 폰트 포맷에 대한 브라우저 지원 여부. (이 글을 읽는 시점의 지원 여부 혹은 브라우저 버전에 따른 지원 여부를 알고 싶다면 여기를 보자.)

 

모든 브라우저에 대응하는 방법을 조사하다 보면, ‘폰트스프링'(Fontspring) 블로그에 소개된 ‘방탄 @font-face 구문'(bulletproof @font-face syntax)이라는 것을 발견하게 된다. 이 방탄 구문은 EOT, WOFF2, WOFF, 압축하지 않은 OpenType, SVG 등을 사용하여 브라우저 대응을 극대화한다.

첫 번째 URL이 좀 이상해 보일 수도 있다. 인터넷 익스플로러 8 및 그 이하 버전들은 여러 개의 폰트 포맷으로 이루어진 구문을 지원하지 않고, src 속성값 전체를 URL로 받아들인다. 방탄 구문은 인터넷 익스플로러 8 및 그 이하 버전들을 속여서, 뒤따라 나오는 나머지 URL들이 첫 번째 URL에 속한 단편 식별자(fragment identifier)라고 생각하게 만든다. (역자 주: 예를 들어 http://www.example.org/foo.html#bar와 같은 URL에서 ‘#’ 뒤에 붙어 있는 bar와 같은 요소가 단편 식별자이다.) 폰트 파일이 다운로드 될 때에는 어차피 단편 식별자가 무시되기 때문에, 인터넷 익스플로러 8 및 그 이하 버전들은 그저 첫 번째 URL만을 사용한다. 그리고 인터넷 익스플로러 외의 브라우저들은 어차피 EOT를 지원하지 않으므로, 첫 줄은 무시하고 넘어간다. 나머지 URL들은 다 짐작이 갈 것이다. 우선적으로 적용되기를 원하는 순서대로 폰트 포맷들을 열거한 것이다.

그런데 이 방탄 구문이 아직도 의미가 있을까? 그렇지 않다. 오히려 나는 이 구문이 좋지 않다고 생각한다. 일단 SVG 폰트는 비인가된 포맷이며 이를 지원하는 브라우저들은 더 이상 사용되지 않는 것들뿐이다. 그리고 사용자가 인터넷 익스플로러 9 및 그 이상 버전을 사용할 때, 이 방탄 구문에서 EOT가 폰트 포맷 목록의 최우선순위라는 사실이 문제가 될 수 있다. 인터넷 익스플로러 9 및 그 이상 버전은 WOFF를 지원하는 데도 불구하고, 단지 EOT가 목록의 맨앞에 있다는 이유 때문에 EOT를 다운로드 받게 되기 때문이다.

어차피 대부분의 웹사이트는 더 이상 구형 브라우저를 지원하지 않기에, 나는 더 단순한 구문을 사용할 것을 강력하게 추천한다. 이 단순한 구문은 모든 최신 브라우저에 대응하며, 안드로이드 4.4 및 그 이하 버전과 같은, 좀 구형이지만 아직 어느 정도 사용되고 있는 브라우저에도 대응한다.

안드로이드 구형 브라우저들이 아직 사용되고 있긴 하지만 전 세계적으로 그 추세는 줄어들고 있다. 조만간 압축하지 않은 OpenType 포맷도 코드에서 없애버리고 구문을 훨씬 더 단순하게 만들 수 있을 것이다.

코드를 이렇게 작성할 경우, 구형 브라우저 사용자는 여기에 선언된 웹폰트 대신 보호용 폰트를 보게 된다. 그건 괜찮다. 그래도 보호용 폰트로 콘텐츠를 읽을 수가 있는 것이다. (보호용 폰트에 대한 더 자세한 이야기는 나중에.)

src 속성 기술자에 대한 값으로 쓸 수 있는 게 하나 더 있다. local 함수는 사용자의 로컬 환경에 있는 폰트 패밀리 이름을 인자로 취한다. 만약 해당 폰트가 사용자 시스템에 설치되어 있다면, 브라우저는 굳이 다운로드 하지 않고 로컬 환경의 폰트를 사용할 것이다.

이 정도로 하면 제대로 최적화가 이루어졌다고 볼 수도 있겠지만, local 함수를 쓰는 것에 대해서는 다시 고민해 봐야 한다. 폰트 이름이 같다고 해서 사용자 로컬 환경의 폰트가 우리가 설정한 웹폰트와 같은 것이라고 보장할 수는 없기 때문이다. 동일한 폰트라도 버전이 다를 수도 있고, 혹은 언어 지원이 다를 수도 있고, 아니면 아예 전혀 다른 폰트일 수도 있다. 따라서 그런 불안 요소들을 떠안고 갈 수 있는 게 아니라면, local 함수는 사용하지 않을 것을 권한다.