fontface

웹 디자인을 더 쉽고 올바르게 하세요.

한글이 들어간 웹 페이지를 디자인할때, 더 이상 포토샵을 이용해서 타이포 이미지를 만들지 마세요. 이미지로 만든 글은 내용을 복사할 수도 없고, 검색엔진같은 로봇이 읽을 수도 없으며, 만들기도 매우 불편합니다. fontface.kr은 웹페이지를 볼 때 폰트의 설치유무에 상관없이 모든 사용자에게 원하는 한글 폰트로 글자를 볼 수 있게 도와줍니다. 단 몇 줄만 추가하시면 됩니다!

다음과 같은 장점이 있습니다.

  • 쉬운 적용 방법
  • 빠른 로딩 속도
  • 대부분의 주요 브라우저 지원

아래 브라우저를 지원합니다.

  • Internet Explorer 6 이상
  • Firefox 3.6 이상
  • Safari 3.2 이상
  • Google Chrome 4 이상
  • Opera 10 이상

지원하는 무료 웹폰트

  • 나눔고딕
  • 나눔고딕(굵게)
  • 나눔명조
  • 나눔명조(굵게)
  • 나눔손글씨 펜체
  • 나눔손글씨 붓체

fontface 사용하기

적용하기

  1. HTML <head>에 다음 코드를 추가하세요. Google WebFont Loader를 통해 웹폰트가 로딩되기 전에도 글자를 표시해줄 수 있습니다.
    <script src="http://www.google.com/jsapi"></script>
    <script>
     google.load( "webfont", "1" );
     google.setOnLoadCallback(function() {
      WebFont.load({ custom: {
       families: [ "NanumGothic" ],
       urls: [ "http://fontface.kr/NanumGothic/css" ]
      }});
     });
    </script>
  2. 그리고 사용하고 싶은 곳에서 아래와 같은 css 속성을 주세요.
    .wf-active body {
     font-family: 'NanumGothic';
    }
  3. 예제를 참고하세요.
    <html>
     <head>
      <style>
       .wf-active body {
        font-family: 'NanumGothic';
        font-size: 48px;
       }
      </style>
      <script src="http://www.google.com/jsapi"></script>
      <script>
       google.load( "webfont", "1" );
       google.setOnLoadCallback(function() {
        WebFont.load({ custom: {
         families: [ "NanumGothic" ],
         urls: [ "http://fontface.kr/NanumGothic/css" ]
        }});
       });
      </script>
     </head>
     <body>
      <h1>fontface.kr의 한글 폰트를 이용한 페이지</h1>
     </body>
    </html>