Завантаження веб-шрифтів за допомогою завантажувача

Від автора: у даній статті ми розглянемо завантаження веб-шрифтів за допомогою завантажувача. Кілька років тому розробники зійшлися на тому, що шрифти повинні бути приховані до повного завантаження відповідних файлів. Багато дизайнери сперечалися з розробниками і стверджували, що спосіб завантаження шрифтів, який носить назву «Миготіння нестилизованного тексту» або МНТ, дратує користувачів. Метод полягає в тому, що поки не завантажився кастомный шрифт, його підміняє стандартний типу Georgia. Більш послідовно було б просто почекати, поки сайт завантажиться повністю, а не спостерігати, як один шрифт перескакує на інший.

Але сьогодні всі суперечки пішли в минуле. Зараз з’явилася нова практика – приховувати весь текст, до якого застосовані кастомні шрифти до повного завантаження файлів шрифтів. Називається такий метод «Миготіння прихованого тексту» або МСТ. Цю техніку часто називають найгіршим з варіантів. Scott Jehl каже, що цей метод поганий як з точки зору продуктивності, так і юзабіліті:

«Як правило, найбільше проблем з МСТ буває в браузерах iOS Safari, які примудряються приховувати текст на 30 секунд і, врешті-решт, відображають його стандартним шрифтом. Схожий ефект, але з меншим часом затримки можна спостерігати в браузерах Chrome, Firefox і Opera.»

У довідці на сайті покращення якості її роботи з цієї проблеми йдеться схожим чином «Метод МНТ більш пристосований для моментального використання веб-сайту, особливо на повільних з’єднаннях». І як дизайнерам і розробникам нам необхідно вибрати щось одне, МНТ або МСТ.

Миготіння прихованого тексту

Миготіння нестилизованного тексту

Відмінності між цими двома методами просто колосальні. Scott також каже, що з МСТ підходом текст на сайті Filament Group відображається через 2.7 секунди на 3G з’єднання, а з МНТ через 0.6. Якщо перед нами стоїть завдання забезпечити максимальну швидкість інтерфейсу, то необхідно використовувати МНТ. Цей метод зосереджений на продуктивності мережі та забезпеченні позитивного досвіду.

Проблеми в методі МНТ

У даного методу, природно, є кілька недоліків. Приміром, із-за сильних розходжень у властивостях font-weight і x-height при зміні зі стандартного шрифту на власний текст може стрибати або сильно поїхати. Тобто якщо компанія хоче використовувати для спілкування якийсь свій брендовий шрифт, то з методом МНТ це стає нереальним.

Іноді такі недоліки можна згладити. Погляньте, наприклад, на сайт Bram Stein. Момент зміни стандартного шрифту на кастомный дуже швидкий, і форматування тексту майже не змінюється. Якщо ж ми не можемо підібрати схожий за розмірами стандартний шрифт, то доведеться скористатися SVG.

Розглянемо метод МНТ

Останнім часом я експериментував з завантажувачем Web Font Loader. Завантажувач дозволяє контролювати всі етапи відображення тексту в МНТ. Спершу, необхідно вставити код завантажувача в розмітку:

(function(d) {
var wf = d.createElement(‘script’), s = d.scripts[0];
s.parentNode.insertBefore(wf, s);
})(document);

Скрипт завантажується асинхронно, тобто код можна додати прямо перед закриваючим тегом body або в head. Інші ресурси не будуть заблоковані. Даний метод не підтримується в IE9, але якщо це не так важливо, то можна замінити на:

Після підключення скрипта необхідно додати наш шрифт. У цьому побічному проекті я експериментував зі шрифтами через @font-face з сайту Typonine, які додаються через link в header сайту:

Preconnect тут дуже корисний, він автоматично робить мережеве рукостискання; перед запитом шрифту з нашого скрипта у нас вже є інформація, необхідна браузеру для завантаження відповідних ресурсів. Процес завантаження стає трохи швидше. (Спасибі Ilya Grigorik за підказку використовувати атрибут crossorigin). Тепер з допомогою об’єкта WebFontConfig можна почати перевіряти, завантажився наш шрифт або ні:

WebFontConfig = {
custom: {
families: [
‘Nocturno Display Medium 3’,
‘Nocturno Book 2’,
‘Nocturno Regular Italic 24’,
‘Nocturno Regular 26’,
‘Nocturno Regular 25’
],
urls: [
‘https://fonts.typonine.com/WF-000000-001254.css’,
‘https://fonts.typonine.com/WF-000000-001255.css’
]
},
timeout: 2000
};

Об’єкт custom говорить Web Font Loader, що ми хочемо завантажити шрифти з зовнішніх стилів. В даному завантажувачі, якщо нам знадобиться, можна скористатися шрифтами з сайтів покращення якості її роботи, Google, Fontdeck і Fonts.com. У масиві families задаються всі імена шрифтів, які будуть використовуватися в CSS font-family.

Ви могли помітити, що я встановив затримку timeout в 2 секунди. Це просто вигадане мною число. Я думаю двох секунд повинно вистачити на запит до мережі – навіть на повільних з’єднаннях, коли користувачам потрібен хоч якийсь контент. Після завантаження файлів шрифтів тегу html буде присвоєно клас:

Ці класи нам знадобляться, щоб задавати стилі в залежності від того, завантажилися чи шрифти чи ні. Існують і додаткові класи, які також можуть нам допомогти:

Тепер у стилях можна задати необхідне сімейство шрифтів в класі .wf-active:

$fallback: Georgia, serif;
h1, .h1 {
font-family: $fallback;
.wf-active & {
font-family: “Nocturno Display Medium 3”;
}
}

Першим ділом користувачі побачать шрифт зі змінною $fallback, але як тільки з допомогою Web Font Loader буде додано наш клас .wf-active, шрифти переключаться на наші. Тепер необхідно скористатися технікою прогресивного поліпшення.

Розбираємося з проблемами

Одна з проблем, яку я помітив, полягала в наступному. Після завантаження та застосування шрифту у рядках змінювалося кількість слів, а окремі елементи ставали або дуже широкими, або навпаки дуже вузькими. Щоб це виправити, можна встановити різні значення font-size і line-height для стандартних і кастомних шрифтів:

h1, .h1 {
font-size: 30px;
line-height: 35px;
font-family: Georgia, serif;
.wf-active & {
font-size: 26px;
line-height: 30px;
font-family: “Nocturno Display Medium 3”;
}
}

Мінімізуємо ефект миготіння нестилизованного тексту

Після першого завантаження Filament Group рекомендують встановити куки, щоб текст не блимав після кожного застосування класу .wf-active. Але в моєму експерименті я використовував звичайну статичну розмітку, і куки були недоступні. Замість цього, щоб оновити значення sessionStorage, я скористався одним з безлічі подій, які є в Web Font Loader:

WebFontConfig = {
// додаткові опції
active: function() {
sessionStorage.fonts = true;
}
}

Не забудьте поглянути на повний список доступних подій. За допомогою цієї події ми можемо швидко перевірити в шапці сайту, а чи існує даний ключ в sessionStorage. Якщо так, то тегу html моментально присвоюється відповідний клас:

(function() {
if (sessionStorage.fonts) {
console.log(“Fonts installed.”);
document.documentElement.classList.add(‘wf-active’);
} else {
console.log(“No fonts installed.”);
}
})();

Даний спосіб не здатний повністю прибрати миготіння тексту. Проблема буде актуальним ще довгий час. Однак даний підхід значно покращує МСТ.

Для хорошої типографіки завантаження шрифтів вкрай важлива

Експерименти за даним методом повністю змінили мою думку про те, що таке хороша типографіка. Якщо у вас є пропозиції по поліпшенню описаного вище методу, залишайте їх у коментарях.