웹폰트에 대해서

스킨에서 대표 웹폰트를 변경하는 방법은 스킨 가이드, 웹폰트를 살펴보세요. 대표 웹폰트 변경 방법을 숙지했다면, 이제 새로운 웹폰트를 추가할 준비가 된 셈입니다.

한글 웹폰트를 제공하고 있는 서비스 가운데 대표적인 서비스는 Google Fonts이며 Early Access가 이에 해당됩니다. 따라서 Early Access에서 제공되지만 스킨에 추가되지 않은 웹폰트를 스킨에 추가해 대표 웹폰트로 설정하는 방법을 알아볼까 합니다.

탕비수다 스킨에서 사용되는 대표이미지는 정보와는 무관합니다.

Google WebFont Loader

스킨의 웹폰트는 Google WebFont Loader로 작동합니다. 아래는 Google WebFont Loader 정의로 HTML에서 확인할 수 있습니다. 스킨은 영문 웹폰트는 Lato를 기본으로 하며 한글 웹폰트는 노토산스를 기본으로 하고 있습니다. 우리가 주목해야할 것은 Early Access에 해당되는 custom 설정입니다.

<!-- Google WebFont -->
<script src="./images/webfont.min.js?ver=1.6.26"></script>
<script type="text/javascript">
  WebFont.load({
    // For google fonts
    google: {
      families: [ 'Lato:400,700:latin' ]
    },
    // For early access or custom font
    custom: {
      families: [ 'Tang Bisuda WebFont' ],
      urls: [ './images/photobit.tangbisuda.font.notosanskr.daum.css' ]
    }
  });
</script>

웹폰트 정의 CSS 추가

Early Access에 접속해 사용할 한글 웹폰트를 선택합니다. 여기서 적용해볼 웹폰트는 Noto Sans KR (Korean)입니다. 해당 웹폰트를 스킨에 사용하기 위해 관련 웹폰트 정의 CSS를 파일로 저장해야합니다. Noto Sans KR (Korean) 웹폰트 정의 CSS 경로(http://fonts.googleapis.com/earlyaccess/notosanskr.css)를 브라우저에서 호출해 관련 정의를 파일로 저장합니다.

IE 브라우저에서는 파일로 내려 받게 되며 크롬 브라우저에서는 파일 내용이 보입니다. 크롬 브라우저를 사용할 경우 해당 내용을 ctrl+a 키로 모두 복사해 메모장에 새로운 파일을 하나 생성하면 됩니다. 파일명을 ‘notosanskr.css’와 같이 그대로 사용해도 좋지만, 규칙성을 위해 ‘photobit.tangbisuda.font.notosanskr.css’로 변경합니다.

파일을 업로드하기 전, CSS 파일 내용을 일부 변경해야합니다. 메모장으로 저장한 파일 내용을 보면, 글꼴이 font-family: 'Noto Sans KR'으로 정의되어 있습니다. 이를 font-family: 'Tang Bisuda WebFont'으로 변경해야합니다. 또한, 폰트 굵기는 400(normal)과 700(bold)만을 사용하므로 그외 폰트는 제거합니다.

/*
* Noto Sans KR (Korean) http://www.google.com/fonts/earlyaccess
* 라이선스: SIL Open Font License, 1.1
* 라이선스 원문: http://fonts.gstatic.com/ea/notosanskr/v2/OFL.txt
 */
@font-face {
   font-family: 'Tang Bisuda WebFont';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
 font-family: 'Tang Bisuda WebFont';
 font-style: normal;
 font-weight: 700;
 src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

이제 저장한 파일을 ‘관리센터 > HTML/CSS 편집’에서 파일을 업로드하면 모든 준비가 끝났습니다.

대표 웹폰트 변경

스킨 가이드, 웹폰트를 따라 대표 웹폰트를 변경해보세요. 추가한 Noto Sans KR (Korean) 웹폰트를 대표 웹폰트로 변경하기 위해서 아래와 같이 Google WebFont Loader custom 정의 가운데 urls 정의를 './images/photobit.tangbisuda.font.notosanskr.daum.css'에서 './images/photobit.tangbisuda.font.notosanskr.css'으로 변경하면 됩니다.

<!-- Google WebFont -->
<script src="./images/webfont.min.js?ver=1.6.26"></script>
<script type="text/javascript">
  WebFont.load({
    // For google fonts
    google: {
      families: [ 'Lato:400,700:latin' ]
    },
    // For early access or custom font
    custom: {
      families: [ 'Tang Bisuda WebFont' ],
      urls: [ './images/photobit.tangbisuda.font.notosanskr.css' ]
    }
  });
</script>

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    문서 다른 글

    댓글 5

    *

    *

    이전 글

    다음 글