웹폰트 직접 serve하기

웹폰트 직접 serve하기

구글에서 나눔고딕이 제대로 서브되지 않는다.

검색해보았더니 직접 웹폰트를 서브하는 방법이 있었다.

—————————————————————————————-

웹폰트 변환은 Font Squirrel의 웹폰트 제너레이터를 사용하면 편하다.
하지만, 변환할 ttf / otf 파일을 업로드 하는데 2MB 까지만 허용하므로
용량이 큰 한글폰트를 변환할때에는 부적합!
결국, 파일을 하나씩 따로 변환하기로 했다.

작업환경

Mac OS X 마운틴라이언

순서

  1. 나눔바른고딕 원본 폰트 준비
  2. woff 파일 만들기
  3. eot 파일 만들기
  4. css 에서 @font-face 설정

1. 나눔바른고딕 다운로드

http://hangeul.naver.com 에서 ttf, otf 무료로 다운로드

나눔바른고딕

2. otf -> woff 변환

http://people.mozilla.org/~jkew/woff/ 에서 sfnt2woff 다운로드
터미널로 다운로드 받은 경로에서 작업 (여기서는 홈디렉토리에서 진행)

3. ttf/otf -> eot 변환

웹애플리케이션으로 변환하기로 함.
그러나 대부분의 서비스들이 업로드 파일크기 제한을 2MB 밖에 허용하지 않음.
따라서 파일크기 제한이 없는 서비스를 찾아보았다.
http://ttf2eot.sebastiankippe.com/ 에서 변환.

4. css 에서 @font-face 설정

서버의 적당한 곳에 woff, eot, ttf 파일을 업로드 한 후,
다양한 브라우저마다의 호환성을 위해 각 웹폰트 파일들을 css에 코딩한다.

이제 원하는 곳에 다음과 같이 폰트를 지정하면 끝.

다음에 할일은?

웹폰트를 지정하면, 폰트파일을 서버에서 다운받는 동안 브라우저 상에는 텍스트가 표시되지 않는다.
이런 현상을 방지하기위해 폰트가 로드된 시점을 알려주는 Web Font Loader를 사용한다.
Google Fonts와 Adobe Typekit의 아름다운 합작소스다.

https://github.com/typekit/webfontloader

아래처럼 구글에서 호스팅하고있는 파일을 사용해도 된다.

Leave a Reply