Пришвидшуємо завантаження сторінки з допомогою завантажувача шрифтів

Коли в останній раз ви використовували Arial, Times New Roman, Helvetica або Comic Sans на веб-сторінках? Зараз використовуються веб-шрифти. Вони (в багатьох випадках) безкоштовні і прості в реалізації:

@import url(//fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);

Потім ви можете використовувати шрифт для всієї сторінки, наприклад.

body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}

Після зображень, шрифти, як правило, займають друге місце по об'єму даних на вашій web-сторінці. Ubuntu font вище додає майже 250Kb ваги до сторінки, що особливо помітно при повільних підключеннях, наприклад, при використанні мобільного інтернету. Chrome, IE, Safari і Opera, залишають порожній простір при завантаженні шрифтів, тож сторінка знаходиться в непридатному для використання стані. Firefox і старі версії Opera показують “запасний” шрифт, а потім перемикаються (FOUT). Жоден з варіантів не є ідеальним рішенням проблеми.

JavaScript webfontloader

На щастя, є й інший варіант: webfontloader. Це бібліотека JavaScript, можете завантажувати шрифти з Google, Typekit, Fonts.com, Fontdeck або з власного сервер у фоновому режимі, коли сторінка завантажена. Сама бібліотека додає ще 17Kb до сторінки, але це також завантажується у вигляді фонового процесу.

Щоб завантажити набір шрифтів Ubuntu вище, ми створюємо глобальний об'єкт з ім'ям WebFontConfig, який визначає наші шрифти і налаштування, а потім завантажуємо webfontloader:

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};
(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

Таким чином, ми можемо визначити як завантажувати шрифти в залежності від пристрою і пропускної здатністі. В ідеалі, ми могли б використовувати Network Information API, але підтримка браузерів залишається обмеженою. Крім того, зверніть увагу на параметр timeout в WebFontConfig; якщо файли шрифтів вимагають більше двох секунд для завантаження, запит буде перервано.

Зворотні виклики з CSS

У webfontloader застосовуються імена класів для html-елемента в процесі експлуатації:

• .wf-loading - запит на всі шрифти

• .wf-active - всі шрифти доступні

• .wf-inactive - жоден з шрифтів не може бути завантажений

Класи також можуть бути застосовані для окремих шрифтів:

• .wf-<familyname>-<fvd>-loading  - один шрифт був запитаний

• .wf-<familyname>-<fvd>-active - один шрифт доступний

• .wf--<familyname>-<fvd>-inactive - шрифт не може бути завантажений

де <familyname> - це урізана версія назву шрифту і <fvd> є варіацією опису, наприклад, i4 для 400 weight italic.

Це дозволяє нам перемкнути шрифти як тільки вони завантажені - як у Firefox, наприклад.

/* default OS fonts */
body {
    font-family: arial, sans-serif;
}
/* fonts now loaded */
.wf-active body {
    font-family: 'Ubuntu';
}

Зворотні виклики з JavaScript

Схожі JavaScript функції можуть бути визначені в WebFontConfig хоча є менше ситуацій, де це корисно, наприклад.

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000,
    loading: function() {},
    active: function() {},
    inactive: function() {},
    fontloading: function(familyName, fvd) {},
    fontactive: function(familyName, fvd) {},
    fontinactive: function(familyName, fvd) {}
};

Для більш детальної інформації ознайомтесь з оф. документацією webfontloader.