Кастомні шрифти для WordPress: плагіни та сервіси

Багато тем на WordPress пропонують варіанти налаштувань шрифтів на сайтах. Однак, не всі теми мають такі функції. Оформлення сайту відіграє важливу роль у сприйнятті користувачами. Воно покращує розуміння прочитаного, утримує читачів протягом тривалого і на підсвідомому рівні впливає їх настрій.

Минули часи, коли єдиними шрифтами для текстів на сайтах вважалися Times New Roman і Georgia. За останні кілька років простір шрифтового оформлення повністю змінився з появою таких шрифтів, як Google шрифти, Typekit та інших.

Дивіться також:

• Як додати свої кастомні шрифти на WordPress
• Як правильно додати шрифти Google Web Fonts у WordPress тему
• WordPress плагіни для додавання шрифтів Google Fonts
• Stylify Me - дивимося, які кольори, шрифти та стилі оформлення використовуються на сайті
• Використовуємо шрифти Google Fonts у текстовому редакторі WordPress

На сьогоднішній день існують сотні безкоштовних шрифтів, інформаційно-навчальних посібників та ресурсів, призначених для оформлення, доступних в Інтернеті. На відміну від Adobe Illustrator, Photoshop та інших класичних програм, WordPress не дає вам повного контролю над шрифтами. Тільки деякі теми можуть використовувати кастомні шрифти.

Тому в цьому пості ви дізнаєтеся про те, як знайти відповідні шрифти користувача і як використовувати їх у вашому сайті на WordPress.

Важливість використання кастомних шрифтів

Перш ніж перейти до розгляду технічних деталей, ви повинні зрозуміти, що стоїть за оформленням та друкарнею?

За визначенням, це технологія проектування дизайну та налаштувань для читання тексту.

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

Від побудови шрифтів залежить багато. На свідомому та підсвідомому рівні – всі оцінюють вміст веб-сторінки з оформлення.

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

Всі веб-браузери включають набір шрифтів за замовчуванням. Це означає, що якщо шрифт не задано у CSS сторінки, то буде використовуватися стандартний варіант. Ви завжди можете використовувати шрифти за промовчанням, але вони ускладнюють роботу користувачів. Ось чому дуже важливо використовувати кастомний шрифт. Якщо ваша тема не дає вам варіантів зміни шрифту, є кілька плагінів, які можуть допомогти.

Як знайти кастомні шрифти на WordPress?

Існує багато сайтів, де можна знайти красиві шрифти. Також є десятки тисяч шрифтів доступних в інтернеті. Деякі з них є безкоштовними для особистого використання. Для комерційного використання потрібна ліцензія. Шрифти Google Fonts та Adobe Edge Fonts – абсолютно безкоштовні. Ось кілька інших ресурсів для пошуку безкоштовних веб-шрифтів:

• Google шрифти: це один із найпопулярніших безкоштовних ресурсів для шрифтів в інтернеті. Існує понад 500 шрифтів, доступних для особистого та комерційного використання. Використовуйте Пара шрифтів для пошуку відповідності шрифтам Google.
• Шрифт білка: на відміну від Google, не всі шрифти Font Squirrel доступні для особистого використання. Тому, перш ніж використовувати якийсь шрифт із цього сайту, ознайомтеся з ліцензією.
• Веб-шрифти Adobe Edge: дає доступ до великої бібліотеки шрифтів. За підтримки сервісу Typekit, доступ до комерційних шрифтів надається за допомогою програми Adobe. Це забезпечує однакову швидкість та стабільність, як і на Typekit.

Вибір шрифтів дуже привабливий, оскільки вони всі красиві. Але багато вибирати не варто. Використовуйте не більше 2 шрифтів на сайті. Тоді вигляд вашого сайту буде послідовним.

Тепер, коли ви вибрали відповідний шрифт для сайту, дізнаємося, як його туди додати.

Додавання кастомних шрифтів до WordPress

Існує два способи додавання шрифтів на сайт WordPress:

• вручну: за допомогою цього методу завантажений шрифт буде завантажений на сайт і позначений через CSS.
• Плагіни: у цьому випадку безкоштовні плагіни для WordPress використовуються для полегшення процесу.

Давайте розглянемо кілька плагінів для WordPress, які дозволяють завантажувати шрифти користувача.

Характеристики плагінів кастомних шрифтів

Програмне забезпечення з відкритим вихідним кодом має перевагу для зацікавленості спільноти, яка завжди прагне взяти участь у роботі на сайті. WordPress також має цю перевагу. Кілька плагінів на WordPress дозволяють додавати шрифти користувача. Як вибрати відповідний плагін за такої великої кількості? Які особливості плагінів для користувача шрифтів?

Ось кілька пунктів для прийняття до уваги:

• Можливість використовувати шрифт користувача
• Можливість використання більше 1 шрифту
• Цільові заголовки та компоненти
• Бонус: можливість змінити налаштування шрифту з візуального редактора

От і все. Перша характеристика у списку дуже важлива. Ви завжди можете завантажити шрифти з сайтів, таких як DaFont, Font Squirrel, але вам потрібно вміти завантажувати їх на сайт WordPress.

WordPress плагіни для кастомних шрифтів

Є багато плагінів на WordPress для налаштування шрифтового оформлення та завантаження шрифтів у WordPress. В решті цієї посади розглядатимуться декілька з них.

1. Use Any Font

Use Any Font – це WordPress плагін, який дає вам зручний інтерфейс для завантаження шрифтів та використання їх безпосередньо через візуальний редактор. Візуальний редактор WordPress може автоматично змінювати шрифт будь-якого тексту. Цей плагін пропонує кілька особливостей, що робить процес додавання шрифтів користувача набагато простіше.

• Установка плагіна: після того, як ви встановили та активували плагін Use Any Font, до візуального редактора додається два нових меню, що розкриваються. Просто виділіть текст, виберіть шрифт з меню або змініть розмір шрифту. Можна робити і те, й інше.
• Дизайн та CSS: це особливо корисний плагін для людей без знання CSS Use Any Font підтримує кілька форматів шрифтів, у тому числі ttf, otf та woff.
• Завантаження через інтерфейс: плагін використовує свій завантажувач інтерфейсу для перетворення шрифтів та зберігає файли шрифтів на вашому сервері, що сприяє швидкому завантаженню сайту.
• Цільове значення текстових елементів: крім можливості завантажувати шрифти, ви також можете використовувати плагін для встановлення будь-яких заголовків або абзаців та змінювати їх шрифти.

Є кілька недоліків. Щоб використовувати плагін, вам потрібний ключ API. Ви можете отримати його безкоштовно з цього сайта. Але безкоштовний API дозволяє завантажувати лише один шрифт. Щоб додати додаткові кастомні шрифти, потрібно придбати преміум ключ API.

Ще одна вада полягає в тому, що плагін не підтримує шрифти Google.

2. шрифт

Font – це креативне рішення для зміни шрифту, його розміру та налаштування інших видів шрифтового оформлення на сайті. Ви можете налаштувати будь-який заголовок, абзац текстової частини вашого сайту у режимі реального часу прямо з front-end. Плагін має кілька функцій таких як:

• Встановлення: після того, як ви активували плагін, перейдіть на ваш сайт і використовуйте панель адміністратора, щоб застосувати різні функції цього плагіна. Таким чином, цей плагін працює як Adobe Photoshop. Виберіть елемент із інтерфейсу, налаштуйте його шрифт, розмір та колір безпосередньо через панель адміністратора. Що зі шрифтами? Ви, безумовно, можете використовувати безкоштовні шрифти з FontsForWeb.com.
• Оформлення шрифту: Є багато інших функцій Для тих, хто сумнівається використовувати CSS, ця плагін допоможе впоратися з оформленням елементів.

Версія Pro: існує також преміум-версія плагіна, яка пропонує такі властивості:

• Ви можете повертати будь-який текст
• Ви можете налаштувати прозорість тексту
• Додати закруглену заливку
• Застосувати ефект тіні до тексту

На жаль, немає жодного способу завантаження шрифту Google.

3. Typekit шрифти для WordPress

typekit.com — преміум-сервіс на основі підписки, який дозволяє вибирати високоякісні шрифти. Ви можете підписатися на typekit і отримати чудові шрифти для вашого сайту на WordPress. Ці шрифти повністю ліцензовані та доступні.

• Установка плагіна: після встановлення та активації плагіна необхідно вибрати шрифти з облікового запису Typekit та опублікувати їх. Вам потрібно отримати код для вставки шрифтів, що публікуються. Ви можете додати цей код до параметрів плагіна.
• Користувальницькі CSS: можна встановити власні CSS правила на цільові заголовки, абзаци або будь-який інший текст, щоб використовувати шрифти Typekit.

Цей плагін орієнтований використання шрифтів Typekit. Тому не можна використовувати будь-які шрифти користувача, завантажені з сайтів Шрифт білка або DaFont.

4. WP Google Шрифти

WP Google Fonts дозволяє використовувати каталог шрифтів Google. Однією з найдивовижніших переваг у сфері шрифтового оформлення є додавання шрифтів Google.

• Розширена бібліотека шрифтів: це величезна бібліотека безкоштовних шрифтів, які постійно удосконалюються і часто використовуються веб-дизайнерами в різних проектах.
• Використання: для використання цього безкоштовного сервісу вам необхідно прив'язати вибраний шрифт через вставку коду в секціїголова> ваш сайт і потім використовувати CSS, щоб застосувати сам шрифт. Для новачків зробити це вручну може бути складно.

Не хвилюйтеся, WP Google Fonts допоможе. Цей плагін не тільки додає потрібні файли, та й дозволяє орієнтуватися на конкретні текстові елементи. Просто встановіть та активуєте його, зайшовши в налаштування. Звідти ви можете вибрати безкоштовні шрифти з бібліотеки Google та встановити потрібні заголовки та шрифти. Інтерфейс користувача покращує ситуацію для новачків.

Підсумки

На що спочатку звертають увагу юзери, зайшовши на ваш веб-сайт? На його оформлення! Більшість оформлення спирається на правильне використання красивих шрифтів. Отже, ви повинні дбати про шрифтове оформлення вашого сайту. Використовуйте один із плагінів, згаданих вище, щоб вбудувати новий стиль шрифту.

Переконайтеся, що ви не використовуєте більше двох шрифтів на одному сайті. Оскільки, чим більше шрифтів ви додаєте на сайт, тим повільніше стає швидкість сайту.

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/