Webfont.js - Web Font Loader

Web Font Loader (webfont.js) cho phép bạn sử dụng các Fonts tùy chỉnh trên Web. Giúp điều khiển fonts 1 cách linh động hơn bằng Javascript, thay vì thẻ <link> hoặc CSS, linh động tùy chỉnh các tham số, tối ưu tốc độ tải và dễ sử dụng hơn.

Web Font Loader hỗ trợ load fonts từ Google Fonts, Typekit, Fonts.com, and Fontdeck, cũng như self-hosted web fonts.

Webfont.js được Google và Typekit cùng nhau phát triển.

Cài đặt

Để sử dụng, chỉ cần load webfont.js và liệt kê các Fonts cần sử dụng. Bạn có thể sử dụng Google Fonts bằng cách sau:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif'],
    },
  })
</script>

Web Font Loader cũng hỗ trợ tải bất đồng bộ (asynchronously), giúp trang tải nhanh hơn mà không cần quan tâm Font có load hay chưa.

<script>
  WebFontConfig = {
    typekit: { id: 'xxxxxx' },
    google: {
      families: [
        'Droid Sans',
        'Droid Serif:bold',
        'Open Sans Condensed:300,700',
      ],
    },
  }
  ;(function (d) {
    var wf = d.createElement('script'),
      s = d.scripts[0]
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js'
    s.parentNode.insertBefore(wf, s)
  })(document)
</script>

Tốc độ có thể được tăng lên, nhưng cách này có thể gây nên tình trạng Flash of Unstyled Text (FOUT). Tức là giao diện bị vỡ do Fonts chưa tải kịp. Trường hợp FOUT có thể được fix bằng nhiều cách, WebFont.js hỗ trợ 1 số API sự kiện cho biết trạng thái tải font, để hiển thị trạng thái đang Loading nếu bạn muốn. Xem thêm ở đây: https://helpx.adobe.com/typekit/using/font-events.html

Tham khảo

• Web Font Loader | Github
• Web Font Loader | Google Developers
• Font events | Typekit Help
• Ảnh: keycdn.com