Як додати свої кастомні шрифти на WordPress

У вас виникла потреба додати свої кастомні шрифти на сайт WordPress? Чудова ідея! Вони дійсно допоможуть урізноманітнити тему, що вже використовується, і внести в неї щось нове.

А ось як це зробити за допомогою шрифтів Google Fonts, Adobe Typekit та методу CSS3 @Font-Face, ви дізнаєтесь у сьогоднішньому пості.

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

• Як правильно додати шрифти Google Web Fonts у WordPress тему
• WordPress плагіни для додавання шрифтів Google Fonts
• Використовуємо шрифти Google Fonts у текстовому редакторі WordPress
• Посібник з іконічних шрифтів у WordPress для новачків
• Додаємо шрифти для іконок у WordPress
• Використання шрифту Genericons на вашому сайті WordPress

Наразі стало дуже популярним використовувати кастомні шрифти у темах WordPress. І є навіть кілька тем, що містять сотні кастомних шрифтів. Проте завантаження великої кількості шрифтів може сповільнити роботу сайту.

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

Ну і заразом дізнаємося, де взяти ці кастомні шрифти для сайту.

Де знайти кастомні шрифти для WordPress?

Раніше шрифти завжди коштували дорого, але тепер усе змінилося. Зараз є дуже багато джерел, де можна знайти чудові безкоштовні шрифти, як, наприклад, Google шрифти, Adobe Typekit, FontSquirrel и fonts.com.

Тим, хто не знає, як поєднувати шрифти, найкраще скористатися джерелом Пара шрифтів. Він допомагає дизайнерам поєднувати гарні шрифти Google.

При виборі шрифтів слід пам'ятати, що їх використання в дуже великій кількості може уповільнити роботу сайту. Тому краще вибрати не більше двох шрифтів та поєднувати їх для дизайну всього сайту.

Кастомні шрифти Google шрифти

У Google є чудові безкоштовні шрифти для оформлення сайту та будь-якого проекту. Щоб скористатися ними на своєму сайті WordPress, достатньо перейти в бібліотеку, вибрати сподобалися і натиснути кнопку під шрифтом.

Після цього вас переведе на наступну сторінку, де необхідно вибрати бажані стилі. Не вибирайте ті, які ви найімовірніше використовувати не будете.

Внизу цієї сторінки є область вбудованого коду. Цей код потрібно скопіювати і додати у тему, що використовується в файл header.php відразу після відкриття тегаголова>:

Додайте наступний код CSS до файлу style.css вашої теми. Ось тепер шрифти Google можна успішно використовувати на своєму сайті WordPress:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

Кастомні шрифти Adobe Typekit

Ще один не менш корисний безкоштовний ресурс кастомних шрифтів, який також має преміум версію. У платній версії всі шрифти розписані детальніше, а в безкоштовній – лімітовано.

Заведіть обліковий запис у Adobe Typekit і створити свій kit для шрифтів.

Виберіть будь-який шрифт з Typekit і додайте його до новоствореного kit. Потім скопіюйте код вашого kit та поверніться до адмінки WordPress.

Тепер потрібно встановити та активувати плагін Typekit шрифти для WordPress.

Після чого в Налаштуваннях → Typekit Fonts розмістіть скопійований код на сторінці налаштувань плагіна:

Тепер залишилося додати код CSS до файлу style.css вашої теми. От і все. Тепер шрифти готові до використання.

h1 .site-title { 
font-family: 'modesto-condensed', Arial, sans-serif; 
} 

Кастомні шрифти за допомогою CSS3 @font-face

Найпростіше додати кастомні шрифти за допомогою методу CSS3 @font-face. Цей метод дозволяє використовувати будь-які шрифти на вашому веб-сайті. Щоб ними скористатися, необхідно завантажити шрифт, що сподобався, у веб форматі.

Якщо ж у вас немає підтримки веб-формату для будь-якого шрифту, можна конвертувати його за допомогою FontSquirrel Webfont generator:

Коли з'являться файли веб-шрифтів, потрібно завантажити їх на сервер веб-хостингу. Найкраще завантажувати шрифти в нову папку "Шрифтиу кореневому каталозі вашої теми оформлення.

Для завантаження шрифтів можна використовувати FTP або File Manager. Після цього підключаємо шрифти в таблиці стилів теми за допомогою CSS3 @ font-face наступним чином:

@font-face {
	font-family: Arvo;  
	src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	font-weight: normal;  
}

Не забудьте змінити так звану родину ваших шрифтів сімейство шрифтів и URL на ваші власні та використовуйте ці шрифти наступним чином:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Однак, завантаження шрифтів прямо з CSS3 @font-face не завжди є найкращим рішенням з точки зору навантаження на ваш сайт. При використанні шрифтів з Google Fonts або Typekit найкраще завантажувати їх безпосередньо з сервера.

Ось, власне, і всі хитрощі.

Джерело: wpbeginner.com

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

редактор wpcafe

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