Як використовувати кастомні шрифти в інтернеті і не зійти з розуму

чи Бувало так, що ви бачите на веб-сторінці картинки і оформлення, але не бачите тексту — він з'являється на кілька (десятків) секунд пізніше? Це завантажуються кастомні веб-шрифти. Пояснюємо, чому це відбувається і як цього уникнути.

Класичне запитання на співбесіді ops-інженерів і програмістів: ви написали в адресному рядку браузера meduza.io і натиснули клавішу Enter. Що станеться? Відповідь на 10 сторінках)
Ок, ми вказали для свого тексту font-family: PFRegal, «Times New Roman». Що станеться?
Браузер подивиться, чи є для PFRegal оголошення font-face. Якщо воно є, то почнеться завантаження файла шрифту. Що будуть бачити читачі ті секунди (десятки секунд на 3G), поки відбувається завантаження?

В Safari: ваш текст буде займати на сторінці місце, але залишиться прозорим, тобто невидимим для читача. Для розрахунку займаного простору використовується fallback font стандартний шрифт, в нашому випадку Times New Roman), про це трохи нижче.

У Chrome і Firefox 3 секунди прозорого тексту, далі використовується системний fallback font.

IE відразу здасться fallback font.
IE не так вже й поганий! image

Всі три підходи відповідають стандарту: „in cases where textual content is loaded before downloadable fonts are available, user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.“
Як боротися з «прозорим текстом» в Safari і Chrome?
Є кілька способів:

  1. Зробіть окремий css-файл з инлайном шрифту, підключайте його після html-коду з текстом. HTML-документ обробляється (і відображається на екрані) від початку файлу до кінця, по мірі завантаження. Це дає можливість управляти шрифтами навіть без використання JavaScript. Важливо робити зробити саме інлайн, а не підключення зовнішнього файлу шрифту. Спосіб не працює Desktop Safari і може не спрацювати, якщо між запитом на рендеринг тексту текстом і підключенням css-шрифту немає достатнього проміжку часу, експериментуйте.

  2. Використовуйте javascript-хак з invalid media type. Цей спосіб дозволяє відразу ж показати текст fallback-шрифтом, але на наших тестах fallback-шрифт висить трохи довше, ніж при першому способі. У цього підходу є проблеми в IE і FF, але в іншому він здається найбільш логічним на сьогоднішній день.

  3. Використовуйте Font Loading API, це дозволяє розпочати неблокирующую завантаження шрифту відразу при відкритті сторінки. Це нове js-API і воно підтримується тільки Chrome і самим останнім Safari.
Всі ці способи потрібні для того, щоб показати текст як тільки він отриманий браузером, без затримки, використовуючи один з шрифтів, доступних в стандартній поставці ОС (fallback font). сервіс для підбору найбільш схожого fallback-шрифту.

Тепер воно моргає при рефреше!
Так, вирішуючи одну проблему ми створили іншу. Тепер текст моргає при рефреше, шрифт змінюється на очах у читача. Доведеться вибрати — що для нас важливіше.

Ми в Медузі оптимізуємо головну сторінку для людей, що відкривають її закладки в браузері: перше відкриття повільне, наступні — миттєві без моргання. Сторінки матеріалів в основному відкриваються з соцмереж на телефонах, де кеша немає, і ми оптимізуємо час появи тексту на екрані при першому завантаженні.

Важливо не забути деякі системні речі:

  1. Налаштувати нормальне кешування на стороні сервера (cache headers).

  2. Включити gzip-стиснення на сервері, воно заощаджує багато мобільного трафіку, а процесори читачів вже досить потужні, щоб не помічати оверхеда на декодування.
Як перевірити, що все працює нормально? У мене занадто швидкий інтернет
  1. Використовуйте вбудовані засоби Google Chrome.

    image
    Можливість сэмулировать поганий інтернет. Good 3G — наш вибір для налагодження Медузи

    image
    Скидання кешу по правій кнопці миші (працює тільки якщо відкриті Developer Tools)

    А також суперзнание, як заблокувати завантаження певного адреси або навіть маску адрес в Хромі: увімкніть Developer Tools Experiments в chrome://flags → Відкрийте Chrome Developer Tools → Налаштування (заховані в трьох точках у правому верхньому куті) → Experiments → Натисніть Shift 6 разів → Поставте галочку Request blocking.

    image
    Тепер ви можете зробити ось так

  2. Для налагодження Desktop Safari буде потрібно встановити Network Link Conditioner (для скачування необхідний Apple Developer Account). Для налагодження iOS Safari і iOS Webview використовуйте Network Link Conditioner в налаштуваннях вашого пристрою (Settings → Developer → Network Link Conditioner). Врахуйте, налаштування обмеження швидкості застосовуватися на всю систему, а не тільки на Safari.
Як щодо нового стандарту?
Завжди будь ласка. Ось властивість font-display, доступне в Chrome Canary. Воно вирішує всі проблеми, перелічені в статті. Ще 2-3 роки і можна буде зітхнути спокійно.

Я перфекціоніст, є ще покращити?
Звичайно! Стисніть файл шрифту, налаштувавши його під себе. Виріжте гліфи, які ви не використовуєте в текстах (у Регала їх за замовчуванням більше 800). Вимкніть зайві Open Type Features. Для всього цього вам буде потрібно спеціальний софт [1], [2] або [3] і розуміння того, як влаштовано шрифти.

Висновок?
Неправильно підключений кастомный шрифт погіршує час завантаження сторінки, і це призводить до того, що ваші сторінки бачить менше людей, які не чекають завантаження. Ідеального способу підключення кастомних шрифтів у вебі поки немає, але є досить хороші хакі, з яких потрібно вибрати найбільш підходящий для конкретної ситуації.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.