JavaScript : Google Font 비동기 로드 방법 : 예제, 구현

JavaScript : Google Font 비동기 로드 방법 : 예제, 구현

 

Google PageSpeed를 통해 웹 사이트를 실행하면 렌더링 차단 파일로 Google 웹 글꼴 스크립트가 강조 표시됩니다.

WebFontLoader를 사용하여 비동기식으로 페이지에 웹 글꼴을 로드하여 이 파일에서 렌더 차단을 제거합니다.

 

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
  // ]]>
</script>