Hướng dẫn sử dụng Google Font không bị Render-Blocking CSS

Updated on May 10, 2019 - Post a Comment
Web Font Loader được phát triển bởi Google và Typekit, giúp tải Font từ Google Fonts, Typekit, Fonts.com, và Fontdeck cho trang Web mà không bị báo chặn CSS (render-blocking CSS) khi kiểm tra bằng công cụ PageSpeed Insights.
Đơn giản chỉ cần thêm đoạn Script bên dưới lên trên thẻ </head>: 
<script type='text/javascript'>
//<![CDATA[

  WebFontConfig = {
      google: {
          families: ['Lato:400,400i,700,700i,900,900i:latin', 'Roboto:400,400i,700,700i:latin,greek,latin-ext', 'Open Sans Condensed:300,700:latin,greek']
      }
  };
  (function(d) {
      var wf = d.createElement('script'),
          s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
  })(document);
//]]>
</script>
Đoạn code trên tải font Lato, Roboto, Open Sans Condensed cho Web, bạn có thể thêm hay bớt tùy nhu cầu.
Lưu template và kiểm tra két quả.
Tags:
Share this: pinterest