استفاده از فونتهای سفارشی که به صورت پیش فرض بر روی سیستمهای کاربران وجود ندارند باعث میشود که تا زمان بارگذاری کامل فونت نوشته هایی که از این فونتها استفاده کرده اند به صورت نامرئی (FOIT) نمایش داده شوند که باعث به هم ریختگی استایل سایت میشود و همچنین در رتبه بندی سایتها از نظر سرعت رندر شدن صفحه بسیار تاثیرگذار است. جهت جلوگیری از این مشکل میتوان از این روش استفاده کرد.
A simple utility to execute a callback when a webfont loads. Demo
This uses the CSS Font Loading Module when available (currently in Chrome 35+ and Opera 22+). When that isn’t available, it uses a very similar approach to the one used in the TypeKit Web Font Loader (which is currently 7.1KB GZIP).
Basically, it creates an element with a font stack including the web font and a default serif/sans-serif typeface. It then uses a test string and measures the dimensions of the element at a certain interval. When the dimensions are different than the default fallback fonts, the font is considered to have loaded successfully.
If you’d like a full polyfill for the CSS Font Loading Module, follow along with Bram Stein’s Font Loader. I believe the specification has changed since he launched this polyfill, but he’s working on an updated version.