ทำความรู้จักกับ WebFont Loader

WebFont Loader ช่วยให้เราสามารถเรียกใช้งาน Web Font Provider ต่างๆ ไม่ว่าจะเป็น Google, Typekit, Fonts.com หรือแม้กระทั่ง font ที่เรา host เอง ผ่าน interface แบบเดียวกัน ทำให้เราสามารถ เปลี่ยน Provider ได้ง่าย นอกจากนั้น ยังมี Event ต่างๆให้เราใช้งาน ยกตตัวอย่างเช่น "Active" จะ Trigger เมื่อ Web Font พร้อมใช้งาน ซึ่งมีประโยชน์อย่างมากในตอนที่เรานำ Web Font ไปใช้กับ canvas ซึ่งถ้าหากเราเรียกใช้งาน Web Font ในขณะที่ยัง load ไม่เสร็จ การแสดงผลก็จะไม่เป็นอย่างที่เราต้องการ และในอีกกรณีคือ ใช้เพื่อแก้ปัญหา "flash of unstyled text" (FOUT)

ตัวอย่างการเรียกใช้งาน WebFont Loader เพื่อ Load WebFont ที่ Hosting เอง

    <script type="text/javascript">
      WebFontConfig = {
        custom: { families: ['iannvcd'],urls: ['fonts/iannvcd/stylesheet.css']},
        active: function(){},
        inactive: function(){}
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

สำหรับผู้ที่สนใจ สามารถศึกษาเพิ่มเติมได้ที่ https://github.com/typekit/webfontloader

แหล่งที่มา : https://github.com/typekit/webfontloader