두가지 방식이 있습니다.

첫번째는 style.css 에 단순히 @import 를 declare 하는 것 입니다.

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

이렇게 하면 가장 간단하지만, performance (페이지 로딩시간) 에 아주 나쁜 악영향을 끼칩니다. 몇년전 이 문제에 대해 타 커뮤니티에서 여러 front-end 개발자분들과 상당히 심층적인 discussion 도 진행되었었는데, 오래전 토론이라 링크를 지금 찾지 못하겠고 자세한 내용은,

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

@import 는 치명적인 속도문제를 유발하는 경우가 종종 있습니다.

그래서 @import 사용을 피하기 위해서는 이런 방식이 존재합니다.

Using webfonts : google & @font-face

위 페이지 나와 있는 예제를 사용하시면 됩니다.

그런데, 이 두번째 방식은 다른 이유로 performance 문제가 발생 합니다.

웹폰트 때문에 개별적 css 를 적용하니 역시 performance 문제가 생길 수 있습니다. 하나의 문서에 여러개의 css 를 개별적으로 포함하는 것은 best practice 가 아닌거죠.

(물론 두번째 방식은 해결책은 존재합니다. css 들을 하나로 묶어서 이걸 aync 로딩하는 방식이 존재합니다. 코프레스 튜토리얼 테마를 공개하면서 적용해서 보여드렸던.. 그런데 소스코드 보신 분들은 아시겠지만, 이걸 짜는게 번거스럽고 복잡합니다. 일반분들이 쉽게 구사해볼 수 있는 방법은 아니라고 생각합니다.)

아무튼 둘다 만족스러운 방식이 아니라 속도를 신경쓰는 대다수 웹사이트 들은 웹폰트 사용을 가급적 피합니다. 적용하는 것도 번거스럽고 나중에 maintenance 도 까다롭죠.

그리고 이제 자스 (javascript) 로 웹폰트를 적용하면 performance 문제가 해결되지 않을까? 라는 생각을 하는 사람들이 생겨나서 나온 제품이.

짜잔!!!

이런류의 웹폰트 로더

https://github.com/typekit/webfontloader

웹폰트 로더로 웹폰트를 asynchronously 로딩하면 페이지 로딩속도 문제가 해결되겠네, 라고 생각했으나, 페이지 로딩초기 웹폰트가 적용되지 않고 보여지는 또다른 문제를 낳은… ㅋㅋㅋㅋ

그래서 웹폰트 사용의 종결자라고 불리는 local storage 방식이 최근에 나왔는데, 일단 이 방식을 설명드릴려면 상당히 긴 별도의 글을 하나 써야하고 개복잡한 관계로 (일반인이 적용하기 상당히 힘든 관계로) 이 방식은 언급하지 않겠습니다.

더구나 local storage 방식은 상당한 논란이 있습니다. 당장 페이지 로딩은 빨리 되지만, 그 폰트를 방문자/사용자 브라우저에 로딩하는 방식으로 문제를 해결한거라, “사용자는 영문도 모르고 자기 브라우저가 무거워지는 문제가 생긴다” 라는 논란입니다. – 아직도 진행중인 논란입니다.

Matthew Park

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Lives in Colorado.