Powered by GitBook

Font Face Observer

Font Face Observer - https://github.com/bramstein/fontfaceobserver/

전체 코드

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

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:100,200,400">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <link rel="stylesheet" type="text/css" href="http://ui-static.korea.ncsoft.corp/fonts/notosans.css">
    <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; }

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

        .wf-active-NotoSans .notosans {
            font-family: Noto Sans KR, sans-serif;
            font-size: 30px;
            font-weight: 200;
        }

        .wf-active-NanumGothic .nanumgo {
            font-family: "나눔고딕", Nanum Gothic, sans-serif;
            font-size: 30px;
            font-weight: 100;
        }
    </style>
    <script src="/common/js/lib/fontfaceobserver.js"></script>
</head>

<body>
    <div class="box2">
        <div class="Roboto">로보토 페이퍼는 누가 봐도 월등한 사용자 경험을 전달해주고 있다.2014 02 21</div>
        <div class="Roboto">Roboto September 2014 02 21 Calendar, My, Today 14. 02. 21 06:01 pm am Monday Journals</div>
        <br />
        <div class="notosans">노토산스 페이퍼는 누가 봐도 월등한 사용자 경험을 전달해주고 있다.2014 02 21</div>
        <div class="notosans">NotoSans September 2014 02 21 Calendar, My, Today 14. 02. 21 06:01 pm am Monday Journals</div>
        <br />
        <div class="nanumgo">나눔고딕 페이퍼는 누가 봐도 월등한 사용자 경험을 전달해주고 있다.2014 02 21</div>
        <div class="nanumgo">NanumGothic September 2014 02 21 Calendar, My, Today 14. 02. 21 06:01 pm am Monday Journals</div>
    </div>
    <script>
        var font = new FontFaceObserver('Roboto');
            font.load().then(function () {
                document.documentElement.classList.add('wf-active-Roboto');
            }).catch(function () {
                console.log('Roboto failed to load.');
            });

        var fontB = new FontFaceObserver('Noto Sans KR');
            fontB.load().then(function () {
                document.documentElement.classList.add('wf-active-NotoSans');
            }).catch(function () {
                console.log('Noto Sans failed to load.');
            });

        var fontC = new FontFaceObserver('Nanum Gothic');
            fontC.load(null, 9000).then(function () {
                document.documentElement.classList.add('wf-active-NanumGothic');
            }).catch(function () {
                console.log('Nanum Gothic failed to load.');
            });
    </script>
</body>

</html>

설명

사용법등은 google - webfont Loader 에 비해 간결하지만 사용자가 적다.
@font-face에 정의된 폰트 이름(아래 코드에서 'Roboto') 의 폰트가 로드 완료 되어 사용가능 시점이 되면 html 태그에 'wf-active-Roboto' 클래스를 추가 하는 코드

  var font = new FontFaceObserver('Roboto');
      font.load().then(function () {
          document.documentElement.classList.add('wf-active-Roboto');
      }).catch(function () {
          console.log('Roboto failed to load.');
      });

results matching ""

No results matching ""