fontface

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

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

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

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

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

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

지원하는 무료 웹폰트

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

fontface 사용하기

적용하기

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>

그리고 사용하고 싶은 곳에서 아래와 같은 css 속성을 주세요.
```
.wf-active body {
 font-family: 'NanumGothic';
}
```

예제를 참고하세요.

<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>