[그누•영카트] 구글 웹폰트를 적용해보자

페이지 정보

yadolee 루루아빠 2,768 2015.10.27 00:57:58

평점

  • 평점 : 0점 (0명 참여)

본문

'관리자 > 레이아웃 추가설정 > 추가 script, css' 에 아래 소스 중 선택하여 추가한다.

1. css import 방식

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
2. link import 방식

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css"> 
3. 웹폰트 로더 동기방식

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({

    // For google fonts
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
    // For early access or custom font
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }

  });
</script>
4. 웹폰트 로더 비동기 로딩 방식

<script type="text/javascript">
  WebFontConfig = {
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
 </script>

문서 전체에 적용하기 위에 상기 소스 아래에 다음 스타일을 적용한다.

<style> 
body {  
 font-family: 'Nanum Gothic', sans-serif; 
        font-size: 12px;
      } 
</style>
추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,333,359
레벨 100
경험치 1,489,562

Progress Bar 15.21%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 7621726 페이지

제목 글쓴이 날짜 조회 추천
이윰  🏆 내글반응 내용 추출 쌍 따옴표가 &#034;로 표시되는 문제 해결하기 shadow2fox 2018.06.18 2,387 0
이윰  🏆 PHP 7.x에서 이윰빌더 알람 푸시(push) 관련 PHP Notice: Undefined index: alarm 해결하기 shadow2fox 2018.07.01 2,442 0
그누•영카트  🏆 그누보드 5.3.1.5 패치 shadow2fox 2018.07.04 2,176 0
그누•영카트  🏆 영카트 5.3.1.5 패치 shadow2fox 2018.07.04 2,490 0
이윰  댓글+2🏆 작성글 날림 방지하기 shadow2fox 2018.07.04 2,386 0
jQuery  🏆 마우스 클릭 및 엔터를 일정 초 이상 유지하면 특정 url로 이동하기 shadow2fox 2018.07.11 2,338 0
이윰  🏆 이윰빌더 최신글 본문 추출시 엔터, 띄어쓰기 태그를 스페이스(한 칸 띄우기)로 바꾸기 shadow2fox 2018.07.12 2,177 0
이윰  🏆 최신 브라우저에서 푸시 사운드 문제 해결하기 shadow2fox 2018.07.20 2,200 0
이윰  🏆 유튜브 재생목록(플레이리스트)이 적용되지 않는다면 shadow2fox 2018.07.29 2,361 0
그누•영카트  🏆 게시글 제목이나 본문에 적용되는 단어 필터링 관리자는 제외하기 shadow2fox 2018.07.30 2,195 0
jQuery  🏆 모바일 및 태블릿에서 스크롤이 아닌 경우에만 터치 제어하기 shadow2fox 2018.08.13 2,361 0
CSS  🏆 특정 아이디나 클래스 이후에 특정 아이디나 클래스가 있을 때 shadow2fox 2018.08.15 2,307 0
그누•영카트  댓글+1🏆 [PHP 7.2.x] count(): Parameter must be an array or an object that implements Countable 에러 해결하기 shadow2fox 2018.08.19 6,948 0
이윰  🏆 공지글에는 댓글 기능 끄기 shadow2fox 2018.08.19 2,280 0
이윰  🏆 Eyoom Builder 3.0.3 - 패치에 문제가 있는 버전입니다. shadow2fox 2018.08.20 2,647 0
이윰  🏆 Eyoom Builder 3.0.4 패치 shadow2fox 2018.08.20 2,999 0
JavaScript  🏆 사용자의 브라우저를 검출하는 방법 shadow2fox 2018.08.22 2,204 0
이윰  🏆 jQuery-1.8.3를 jQuery-1.9.x 이상으로 업그레이드시 masonry 오류 해결하기 shadow2fox 2018.08.22 2,334 0
그누•영카트  🏆 그누보드 5.3.1.6 패치 shadow2fox 2018.08.25 2,301 0
그누•영카트  🏆 영카트 5.3.1.6 패치 shadow2fox 2018.08.25 2,314 0
이윰  🏆 태그(tag) 인덱스에서 새로운 글에 new 표시하기 shadow2fox 2018.08.26 2,244 0
이윰  🏆 Eyoom Builder 3.0.5 패치 shadow2fox 2018.09.04 2,442 0
그누•영카트  🏆 그누보드 5.3.1.7 패치 shadow2fox 2018.09.18 2,329 0
그누•영카트  🏆 영카트 5.3.1.7 패치 shadow2fox 2018.09.18 2,373 0
이윰  🏆 Eyoom Builder 3.0.6 패치 shadow2fox 2018.09.18 2,715 0
이윰  🏆 이윰빌더 시즌1 → 시즌4 업그레이드 가이드 shadow2fox 2018.10.05 2,874 0
그누•영카트  🏆 그누보드 5.3.1.8 패치 shadow2fox 2018.10.15 2,172 0
그누•영카트  🏆 영카트 5.3.1.8 패치 shadow2fox 2018.10.15 2,426 0
이윰  🏆 Eyoom Builder 3.0.7 패치 shadow2fox 2018.10.15 2,519 0
그누•영카트  🏆 그누보드 5.3.1.9 패치 shadow2fox 2018.10.19 5,830 0