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

November 23, 2017 November 27, 2017
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ả.
Click to show more

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

Ads Above Article

Ads Inside Article 1

Ads Inside Article 2

Ads Bellow Article