WebFont Loader(google)

CSS import

  • 스타일시트에서 CSS @import를 사용하면 웹 페이지 로드 중에 추가적인 딜레이(지연 현상)가 발생할 수 있습니다
    @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

폰트 로더 적용 전체 코드

http://ui-static.korea.ncsoft.corp/hsh/webfont/webfont_webfontloader.html

<html>
    <head>
        <style>
            body { margin: 0px; line-height: 1.7; font-family: "돋움", Dotum; font-size: 24px;}
            .box1 { padding: 20px; letter-spacing: -0.5px; color: #fff; background-color: #3c91c8; }
            .box2 { padding: 20px; letter-spacing: -0.5px; color: #666; }
            .default {
                font-family: "돋움", Dotum;
                font-size: 24px;
            }

            .wf-active .Roboto {
                font-family: Roboto, sans-serif;
                font-size: 30px;
                font-style: normal;
                font-variant: normal;
                font-weight: 100;
            }

            .wf-active .notosans {
                font-family: "Noto Sans KR", sans-serif;
                font-size: 24px;
            }
        </style>
        <script>
            if (sessionStorage.fonts) {
                document.documentElement.classList.add('wf-active');
            } else {
            }
        </script>
    </head>
    <body>
        <div class="box2">
            <div class="Roboto">페이퍼는 누가 봐도 월등한 사용자 경험을 전달해주고 있다.</div>
            <div class="Roboto">September 2014 02 21 Calendar, My, Today 14. 02. 21 06:01 pm am Monday Journals</div>
            <div class="notosans">페이퍼는 누가 봐도 월등한 사용자 경험을 전달해주고 있다.</div>
            <div class="notosans">September 2014 02 21 Calendar, My, Today 14. 02. 21 06:01 pm am Monday Journals</div>
        </div>
        <script>
            WebFontConfig = {
                google: {
                    families: ['Roboto:100,200,400']
                },
                custom: {
                    families: ['Noto Sans KR'],
                    urls: ['http://ui-static.korea.ncsoft.corp/fonts/notosans.css']
                },
                active: function() {
                    sessionStorage.fonts = true;
                }
            };
            (function() {
                var wf = document.createElement('script');
                    wf.src = 'webfontloader.js';
                    wf.type = 'text/javascript';
                    wf.async = 'true';
                var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(wf, s);
            })();
        </script>
    </body>
</html>

설명

  1. 폰트가 로드 되기 전에는 시스템 기본 폰트를 적용하여 폰트가 로드되기 전에도 텍스트 자체는 보이게 한다.
  2. 폰트가 로드된 후 html 태그에 wf-active 클래스를 추가한다

  3. 클래스가 추가되면 wf-active 클래스 하위의 각 웹폰트 스타일이 적용된다

  4. 구글의 'webfontloader.js' 파일을 로드하는 스크립트

  5. 스크립트 파일의 비동기 로드를 위해 async 옵션을 true 로 지정

    var wf = document.createElement('script');
  wf.src = 'webfontloader.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);

    .

  6. webfontloader 설정
    • google : 구글에서 제공하는 웹폰트일경우 폰트명과 weight를 지정
    • custom : 사용자 지정 웹폰트일 경우
    • active : 웹폰트가 모두 로드되어 랜더링 가능한 시점에 실행될 함수:현재 세션에서는 폰트가 로드 되어 있다고 sessionStorage.fonts 에 저장해 놓는다.
WebFontConfig = {
    google: {
        families: ['Roboto:100,200,400']
    },
    custom: {
        families: ['Noto Sans KR'],
        urls: ['http://ui-static.korea.ncsoft.corp/fonts/notosans.css']
    },
    active: function() {
        sessionStorage.fonts = true;
    }
};

.

  • 폰트가 로드되기 전까지 보일 기본 폰트 스타일을 지정한다.

    body { margin: 0px; line-height: 1.7; font-family: "돋움", Dotum; font-size: 24px;}

    .

  • 폰트가 로드되어 사용가능한 시점이 되면 html 태그에 자동으로 wf-active 클래스가 추가 된다.

    .wf-active .notosans {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 24px;
}

    .

  • 폰트 로딩전 세션에 폰트가 이미 로딩 되어 있는지 체크후 로딩 되어 있을 경우 wf-active 클래스를 html 태그에 추가하는 코드
  • 이미 폰트가 로딩 되어 있을 경우 딜레이 없이 바로 클래스가 추가 되기 때문에 빨리 스타일이 적용된다.
    if (sessionStorage.fonts) {
  document.documentElement.classList.add('wf-active');
}

참고

results matching ""

    No results matching ""