Google Fonts став основним ресурсом для користувацької веб-типографії з моменту її розробки в 2010 році. Є три основні причини, чому Google став лідером тут. По-перше, не було достатньо пристойних шрифтових служб, тому Google заповнив порожнечу. По-друге, навіть на початку різноманітність, яку вони пропонували, була порівняно велика. На даний момент існує понад 800 шрифтів у різних стилях. По-третє, ці шрифти доступні безкоштовно, що робить їх особливо привабливими.
Крім того, їх напрочуд легко інтегрувати у ваші дизайнерські проекти. Ми покажемо вам, як ви можете включити ці шрифти Google у свій сайт WordPress.
Шрифти Google
Для початку вам потрібно вибрати шрифт, з яким ви хочете працювати. Є різноманітні варіанти, тому у вас є досить велике меню на вибір. Ви можете знайти їх, перейшовши до Сторінка шрифтів Google. Якщо ви шукаєте певний шрифт, просто введіть назву шрифту в поле пошуку, і він повинен отримати зразок.
Ви також можете використовувати інші параметри пошуку. Прямо під вікном пошуку є кнопка під назвою «Категорії». Якщо натиснути на це, з’явиться спадне меню з п’ятьма параметрами. Це такі:
- Засічки – це шрифти з короткими лініями, що випливають із верхнього та нижнього штрихів літери. Гарними прикладами є Times New Roman і Sylfaen.
- Sans Serif – як випливає з назви, це шрифти без цих маленьких ліній. Вони, як правило, мають просту й чисту естетику.
- Дисплей – це те, що можна назвати шрифтами, що привертають увагу. Вони найкраще підходять для заголовків, а не для довгого тексту.
- Рукописний ввод. Завдяки цим шрифтам здається, що хтось написав їх від руки. Ви побачите, що багато з них написані скорописом або мають менш послідовний інтервал.
- Моноширинні – як друкарська машинка, їхні літери займають однакову горизонтальну ширину. Вони дуже рівномірно розташовані.
Окрім цього, у вас також є інші варіанти на вибір, наприклад, вибір властивостей мови та шрифту. Останній включає кількість стилів, товщину, нахил і ширину.
Вбудовування шрифтів у WordPress
Якщо ви хочете включити ці унікальні шрифти на свій сайт WordPress, ви можете спробувати кілька методів.
Використання CSS
Натисніть на шрифт із вибору Google, і ви перейдете на детальну сторінку шрифтів. У верхньому правому куті є знак «+». Натисніть на нього, і відкриється бічне вікно. Натисніть на «Вставити».
Тепер ви можете натиснути @import. Це відкриє код CSS, який вам потрібно скопіювати. Перейдіть до таблиці стилів вашої теми WordPress і вставте її на початку. Переконайтеся, що ви скопіювали посилання на імпорт без файлу дужки. Переконайтеся, що ви зберегли, і ви додасте шрифт.
Використання PHP
Виконайте кілька перших кроків і скопіюйте посилання, яке ви отримаєте після натискання знака «+». Тепер просто додайте його до файлу header.php вашої теми. Не забудьте зберегти, щоб шрифт був доданий.
Використання функції Javascript
Ви також можете спробувати щось відоме як "постановка в чергу". Для цього вам знадобиться використовувати функцію wp_enqueue_style. За допомогою цього методу ви можете додати вибраний шрифт до розділу заголовка всіх сторінок вашого веб-сайту. Це чудовий спосіб додати кілька змін одночасно.
Просто отримайте посилання на шрифт (від http до ”) і додайте його до файлу functions.php своєї теми з додатковим кодом навколо нього. Ось код, який вам потрібно використовувати:
функція custom_add_google_fonts() {
wp_enqueue_style( ‘custom-google-fonts’, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, false );
}
add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );
Будь-який з цих параметрів чудово підійде для інтеграції шрифтів Google у ваш веб-сайт WordPress, тому важливо вибрати той, який вам найбільше підходить.