Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для завантаження шрифтів можна використовувати 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 6

Так просто:

І не слова про webfonts.ru

Ilya Shpagin:

чергове ДЯКУЮ!

Serj Air:

дякую за корисну статтю

Джон:

Величезне спасибі. саме те, що шукав!

Сергій:

Також в аддонах Ultimate від Visual Composer є менеджер Гугловських шрифтів.

Єдиний мінус у всьому це те, що кирилиці мало на цих сервісах.

Макс:

Дякую! допомогло!

Додати коментар або відгук