나눔바른고딕 웹폰트 만들기

시작하기 전에…

웹폰트 변환은 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 다운로드
터미널로 다운로드 받은 경로에서 작업 (여기서는 홈디렉토리에서 진행)

$ chmod +x ~/sfnt2woff
$ ~/sfnt2woff ~/NanumBarunGothic.otf

3. ttf/otf -> eot 변환

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

4. css 에서 @font-face 설정

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

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 src: url('/fonts/NanumBarunGothic.eot');
 src: url('/fonts/NanumBarunGothic.eot') format('embedded-opentype'),
 url('/fonts/NanumBarunGothic.woff') format('woff'),
 url('/fonts/NanumBarunGothic.ttf') format('truetype');
}

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

font-family: 'NanumBarunGothic';

다음에 할일은?

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

https://github.com/typekit/webfontloader

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

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
 WebFont.load({
  custom: {
   families: ['NanumBarunGothic'],
   urls: ['/css/font.css']
  }
 });
</script>
Advertisements

나눔바른고딕 웹폰트 만들기”에 대한 9개의 생각

  1. 감사합니다. 도움이 되었습니다~

  2. 아 그리고, `chmod -x ~/sfnt2woff` 가 되어야 할것 같네요. -가 아니라..

  3. chmod +x 요. 실수했네요 저도 ㅎㅎ

  4. […] 웹폰트 적용은 “나눔바른고딕 웹폰트 만들기”를 참조하고 자식 테마에서 style.css에 항목을 추가하여 […]

  5. […] 않았다. 살짝 귀찮지만 당분간은 웹폰트를 만드는 수고를 해야한다. '나눔바른고딕 웹폰트 만들기'글 […]

  6. sfnt2woff 를 터미널로 어떻게 해야하는지 몰랐는데, 이렇게 하는군요+_+

  7. 구글에서 검색했는데 정말 유용한 정보네요 ㅠㅠ 다음에 기회될 때 한번 적용해봐야겠어요 ㅎㅎ 감사합니다~!

  8. 좋은 글 감사합니다. 미생체를 웹폰트로 적용해보고싶어서 가장 먼저 언급해주신 Font Squirrel 에 들어가서 올려봤는데, 폰트 용량이 12MB 인데도 잘 올라가네요. 다운로드 버튼을 눌렀더니 30%까지 지금 잘 진행중입니다. 아마 에러 메시지가 없는걸 보니 잘 될 것 같아요.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중