Типографіка вашого веб-сайту має величезний вплив на сприйняття вашого сайту, тому варто витратити час, щоб правильно налаштувати цей аспект.
Esl дозволяє вам додавати будь-який шрифт, який ви хочете. Від безпечних для вебу шрифтів до шрифтів Google, а також завантажувати ваші власні шрифти у вашій панелі управління WordPress під Esl > Користувацькі шрифти. Останнє, на чому ми зараз зосередимося, розглянемо детальніше.
Як створити та завантажити користувацькі шрифти
Щоб створити новий користувацький шрифт, перейдіть до Esl > Користувацькі шрифти у вашій панелі управління WordPress і натисніть Додати новий.
По-перше, давайте надамо вашому користувацькому шрифту назву. Ця назва з’явиться у випадаючому списку font-family під час редагування типографіки в системі.
Тепер ви можете почати завантажувати файли шрифтів для всіх варіантів шрифта (font-weight і font-style), які плануєте використовувати на своєму сайті:
Ви можете побачити в наведеному вище прикладі, що ми завантажили файл шрифту .WOFF і .WOFF2 для стандартної ваги шрифта (400) і стилю шрифта “Звичайний”.
Якщо у нас були б файли шрифтів для ваги шрифта 700 (жирний) та стилю шрифта “Курсив”, ми б натиснули кнопку “Додати варіант шрифта”. Виберіть значення ваги шрифта “700” та стиль шрифта “Курсив”, а потім завантажте відповідні файли шрифтів для цього варіанту.
Після того, як ви створили всі відповідні варіанти шрифта і відповідно завантажили всі файли шрифтів, ви можете зберегти свої шрифти. Ваш новий користувацький шрифт тепер доступний у системі.
Ви також можете бачити попередній перегляд шрифта під час редагування вашого шрифта або на сторінці “Користувацькі шрифти”.
Якщо ваші користувацькі шрифти не відображаються правильно, будь ласка, перевірте свої налаштування URL WordPress.
Підтримувані формати шрифтів
Наступні формати шрифтів за замовчуванням увімкнені:
- WOFF (Web Open Font Format): Це рекомендований формат шрифтів, що використовується всіма сучасними браузерами. Дані шрифту стиснуті, тому завантажуються швидше, ніж той же шрифт, наданий через файли TrueType або OpenType. Повна підтримка для IE9+.
- WOFF2 (Web Open Font Format 2.0): Шрифт TrueType/OpenType із ще кращим стисненням, ніж WOFF 1.0. Відсутня підтримка браузерів IE.
- TTF (TrueType Font): Нестиснуті дані шрифтів, але часткова підтримка для IE9+.
Рекомендований формат шрифтів – WOFF, із поточною підтримкою браузерів 98.26%, та повною підтримкою для IE9+.
Як увімкнути більше форматів шрифтів
Якщо вам потрібно підтримувати IE8, ви можете програмно активувати формат шрифту EOT (або будь-який інший формат шрифту), додавши наступний код у дитячу тему Esl:
add_filter( 'esl/custom_fonts/mime_types', function( $mime_types ) {// Увімкнути формат шрифту EOT для <IE9 підтримки браузераarray_unshift( $mime_types, ['eot' => 'font/eot'] );return $mime_types;} );Якщо ви створили принаймні один власний шрифт, розділ “Власні шрифти” з усіма вашими власними шрифтами з’явиться під “Стандартними шрифтами” в будь-якому контролі “font-family”:
Порада: Як стати GDPR-сумісним, хостуючи шрифти Google самостійно
Користуючись шрифтом Google на своєму сайті, вам потрібно отримати згоду від відвідувачів вашого сайту перед відображенням шрифту.
Ви можете уникнути цієї проблеми, завантаживши всі відповідні варіанти шрифтів для шрифтів Google, які хочете використовувати на своєму сайті, а потім завантажити їх як “Власні шрифти” в Esl.
Проект “Google Webfonts Helper” є чудовим ресурсом для безпосереднього завантаження всіх .eot, .woff, .woff2, .svg, .ttf файлів шрифту Google.
Esl 1.4 дозволяє вам “Вимкнути шрифти Google” зовсім через налаштування Esl в розділі “Продуктивність”: