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

페이지 정보

루루아빠 2,445 2015.10.27 00:57

평점

  • 평점 : 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>
추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,289,778
레벨 96
경험치 1,386,756

Progress Bar 66%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7462538 페이지
제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 게시판을 디바이스에 따라 보여주기 안보여주기 루루아빠 2015.11.04 2,165 0
HTML5  🏆 HTML5 동영상 혹은 오디오 마우스 우측 버튼 다운로드 금지시키기 루루아빠 2015.10.31 2,962 0
JavaScript  🏆 마우스 오른쪽 버튼 사용시 경고 메세지 띄우기 루루아빠 2015.10.31 2,520 0
이윰  🏆 Eyoom Builder 1.1.14 패치 루루아빠 2015.10.30 3,196 0
그누•영카트  🏆 🚩 구글 웹폰트를 적용해보자 루루아빠 2015.10.27 2,446 0
이윰  🏆 Eyoom Builder 1.1.13 패치 루루아빠 2015.10.26 2,661 0
이윰  🏆 Q&A 게시판 최신글추출시 '비밀글입니다.' 를 원글 제목으로 변경하기 루루아빠 2015.10.20 2,608 0
이윰  🏆 Bootstrap's Accordion 모두 펼치기 루루아빠 2015.10.20 2,774 0
이윰  🏆 Eyoom Builder 1.1.12 패치 루루아빠 2015.10.19 2,888 0
그누•영카트  🏆 영카트 5.1.2 (PHP7 대응 MySQLi 지원추가) 패치 루루아빠 2015.10.17 4,489 0
그누•영카트  🏆 그누보드 5.1.3 (PHP7 대응 MySQLi 지원 추가) 패치 루루아빠 2015.10.17 2,735 0
이윰  🏆 Eyoom Builder 1.1.11 패치 루루아빠 2015.10.15 2,564 0
그누•영카트  🏆 전체목록보이기 체크시에도 이전글 이다음글 버튼 나타내기 루루아빠 2015.10.15 2,606 0
그누•영카트  🏆 영카트 5.1.1 (카카오페이, 간편결제 추가) 패치 루루아빠 2015.10.11 2,934 0
그누•영카트  🏆 영카트 5.1.0 (테마지원) 패치 루루아빠 2015.10.11 3,362 0
그누•영카트  🏆 모바일에서 로고 이미지 올바르게 위치시키기 루루아빠 2015.10.11 2,802 0
그누•영카트  🏆 그누보드 5.1.2 패치 루루아빠 2015.10.11 2,825 0
이윰  🏆 모바일에서 btn-e-xs 버튼 크기로 간격 조절 루루아빠 2015.10.09 2,877 0
그누•영카트  댓글+2🏆 💾 네이버 웍스 모바일을 이용해 소유 도메인으로 메일 서비스 이용하기 루루아빠 2015.10.06 3,159 1
이윰  🏆 Eyoom Builder 1.1.10 패치 루루아빠 2015.10.06 2,655 0