본문으로 바로가기

웹폰트(@font-face) 적용법

category 웹코딩/CSS 2012.12.29 00:16

한글 폰트는 아쉽게도 글자 수가 많아 용량이 커지기 때문에 웹폰트 도입이 활발하진 않습니다만 외국에서는 Google Web Fonts 서비스와 Typekit, Cufon등 관련 서비스가 활성화 되어있습니다. 하지만 한글 가독성을 위해 이만한 것도 없으니 미래를 위해 사용법을 배워보도록 합시다.

웹폰트 호환성

@font-face로 웹폰트를 쓸때 가장 유의해야 할 것이 브라우저간의 호환성이다.

  IE Chrome Firefox Opera Safari
WOFF 9.0 부터 지원

6.0 3.5

11.10 5.1
EOT IE6~IE9 지원 미지원 미지원 미지원 미지원

보는 바와 같이 modern-browser들은 woff 파일을 모두 지원하기 때문에 사용하는데 무리가 없다. 언제나 문제인 것이 구버전의 IE의 경우인데 IE8 이하의 브라우저들은 eot 파일을 사용해야 한다.

고로, IE 구버전들을 위한 eot 파일과 woff 파일 두가지를 준비해야 한다. 사실 IE를 제외한 다른 브라우저들은 ttf 파일도 지원하지만 이는 압축되지 않은 타입으로 웹에서 사용하긴 무리이니 생략한다. 웹폰트는 저작권 문제도 포함하고 있는데 국내에서는 네이버에서 무료로 배포하는 나눔글꼴시리즈를 많이 사용한다.

Nanum-web-font.zip

웹폰트 문법

간단히 사용법을 소개한다

@font-face {
    font-family: <a-remote-font-name>
    src: <source> [, <source>]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

속성값들의 설명은 아래와 같다.

  • <a-remote-font-name> : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
  • <source> : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
  • <weight> : 폰트의 굵기(font weight) 값.
  • <style> : 폰트 스타일(font style) 값.

웹폰트 추천 사용법

실제 사용시에는 아래와 같이 사용한다.

@font-face{
    font-family:ng;
    src:url(NanumGothic.eot);
    src:local(※), url(NanumGothic.woff) format(‘woff’)
}

body{font-family:'나눔고딕', 'NanumGothic', ng}
  • ng(이름은 원하는데로 작성가능)라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조
  • IE 6~8은 eot 글꼴만 요청해서 화면에 표시한다(eot 형식을 woff 형식보다 먼저 참조).
  • IE 9와 Chrome, Firefox, Safari, Opera는 woff 글꼴만 요청해서 화면에 표시(@font-face 명세에 의해 eot 글꼴에 대한 format('eot') 선언이 없기 때문에 브라우저가 eot 글꼴을 내려받아야 하지만 영리하게도 내려받지 않는다.
  • local(※) 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. 그러나 이코드에서는 IE6~IE8이 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해준다.
  • local(※) 값의 괄호 안쪽에 포함된 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.
  • format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다. 값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 하며 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세이다. 글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것이다. IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만들지만 여기서 그것이 목적은 아니다.
  • 나눔고딕 시스템 글꼴의 이름을 한글과 영문으로 연거푸 두 번 적은 이유는 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있기 때문이며 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋다.
  • 사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

    @media 규칙 내부에 웹폰트 사용하기

    미디어 쿼리를 이용하여 모바일기기등에서는 웹폰트를 다운로드 받지 않기 사용되는 방법이다. 이때 IE 9는 미디어쿼리 안의 @font-face를 무시하기 때문에 조건부 주석문을 사용한다.

    <!–[if IE 9]>
    <style>
    /* This code is used only in IE 9 */
    @font-face{
    font-family: ng;
    src: url(NanumGothic.eot)
    }
    
    body{ font-family:나눔고딕, NanumGothic, ng }
    </style>
    <![endif]–>
    

    나머지 브라우저들에선 미디어 쿼리를 이용한다.

    /* IE 9 does not support @font-face within @media */
    @media all and (min-width:768px) {
      @font-face{
        font-family:ng;
        src:url(NanumGothic.eot);
        src:local(※), url(NanumGothic.woff) format(‘woff’)
      }
    
      body {
        font-family: 나눔고딕, NanumGothic, ng;
      }
    }
    

    IE 6~8 브라우저는 미디어쿼리를 지원하지 않기때문에 폴리필의 일종인 respond.js와 같은 라이브러리를 필요로 한다.




댓글을 달아 주세요

  1. 왼손은거들뿐 2013.05.28 13:46 신고

    @font-face 자세한 설명 감사합니다.

  2. 행복 2014.06.17 04:51 신고

    안녕하세요

    @font-face{
    font-family:"Nanum Gothic";
    font-style: normal;
    src:url('//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot');
    src:url('//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),
    url('//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff') format('woff'),
    src:local(※), url('//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff') format('woff');
    }

    구글 블로그를 사용중입니다,. 현재 이코드가 맞게 된것인지요?
    그냥 url(NanumGothic.woff) 라고 적으니 인식이 되지 않습니다..구글 웹폰트에도 저처럼 이렇게 표시되어서요...
    답변 부탁드립니다. 그리고 woff2 하고 eot (embedded 도 없어도 되는건지요?

    • BlogIcon 흉내쟁이 2014.06.18 04:21 신고

      네 당연히 url은 자신의 경로에 맞게 수정해야 합니다.
      구글 블로그를 사용해 본적이 없어 상세한 도움은 못드리겟네요.

      다만 근래에는 직접 올려서 사용하지 않고, 구글 웹폰트를 사용하고 있습니다.
      http://www.google.com/fonts/earlyaccess 로 접속하시면 나눔고딕 시리즈를 발견할 수 있습니다.


  3. ablin46 2015.07.08 14:38 신고

    고맙습니다. :)

  4. BlogIcon 오키토키 2016.01.22 10:13 신고

    설명요약 좋습니다.

  5. BlogIcon COCO Media 2016.02.05 23:24 신고

    local(※) 값을 이용하면 IE 구형에서는 더이상 처리를 하지 않는 다는 점!! 배웠습니다.

    궁금한게 그러면

    만약에 폰트를 적어줄때 src: local('NanumGothic'), local('나눔고딕'), url(NanumGothic.eot);
    이런식으로 작성을하면 시스템에서 대체폰트를 찾을때까지 더오래걸리기 때문에 사용을 하지 않는건가요?!!

    아니면 시스템에서 먼저 갖고 오기때문에 용량이 큰 웹폰트를 읽는것보다 빠를까요?!

    오늘도 스킨 폰트 바꾼다고 ㅠ_ㅠ 힘들었네요. 폰트에서 대해서 또 많이 배워갑니다!

    • BlogIcon 흉내쟁이 2016.02.05 23:33 신고

      음. 설명을 괴랄맞게 해놔서 헷갈리실듯 싶네요.

      우선은, 근래에는 local 작성부분을 아예 빼버리고 사용하는 추세입니다. 이 글이 작성된 시기(3년전)보다 더 이전 시대부터 위와 같은 방법으로 사용되었고요.

      구글에서 서비스하는 폰트의 CSS주소를 따라 들어가보시면 참고가 되실껍니다.

      위에서 사용된 local 사용법은 IE6~8이 .eot 파일을 다운로드 한후에 또 다시 .woff 파일을 다운로드하는 것을 막기 위한 방법이지 다른 대체 폰트를 찾을 목적으로 작성된 것이 아닙니다.

      대체 폰트의 나열은 간단히 font-family: '글꼴명', '글꼴명2' 과 같이 사용하게 되겠죠.

티스토리 툴바