Як Встановити Шрифт на Сайт в WordPress

1. Вступ Навіщо робити ваш блог нудним використовуючи стандартні шрифти? Дозвольте вашому блогу розповісти...
2. Конвертація шрифтів в доброзичливий для вебу формат
3. Що вам знадобиться
4. Варіант 1 - Установка шрифтів через плагіни
5. WP Google Fonts
6. Typekit Fonts For WordPress
7. Use Any Font
8. Варіант 2 - Як встановити шрифт на сайт в WordPress вручну
9. висновок

Вступ

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

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

І тут виникає два питання - де взяти для користувача шрифти для WordPress і як встановити шрифт на сайт. Давайте це з'ясуємо.

Де скачати шрифти WordPress

Існує безліч різних сайтів на яких можна знайти безкоштовні веб-шрифти. Font Squirrel - це один з таких сайтів. Тут ви можете знайти безкоштовні шрифти, ліцензовані для комерційного використання. Google Web Font Service ще один сервіс, вже від компанії Google, що надає безкоштовні шрифти на більш ніж 135 мовами. Edge Web Fonts також є сервісом безкоштовних шрифтів надаються Adobe, який може похвалитися величезною колекцією веб-шрифтів. Можливо вам сподобається використовувати для цього Typekit , Який має безкоштовну бібліотеку з тисяч веб-шрифтів або Fonts.com , Що надає більш 150,000 шрифтів для веб і робочого столу.

Ще пара сайтів звідки ви можете завантажити безкоштовні шрифти dafont і 1001freefonts .

Конвертація шрифтів в доброзичливий для вебу формат

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

Перед початком процесу конвертації з одного формату в інший, давайте пройдемося по різним форматам шрифтів.

OTF - це самі часто використовувані шрифти для веб і є зареєстрованою товарною маркою Microsoft. Вони відмінно працюють практично з усіма великими браузерами.

Також звані як TTF, ці шрифти розроблені Microsoft і Apple в 1980 році і широко використовуються в обох операційних системах Windows і Mac. Вони підтримуються всіма великими браузерами, включаючи Internet Explorer від версії 9.0, Google Chrome від версії 4.0, Safari від версії 3.1, Firefox від версії 3.5 і Opera від версії 10.0.

WOFF шрифти широко використовуються на веб-сторінках і рекомендовані W3C. Вони підтримуються більшістю великих браузерів, включаючи Internet Explorer від версії 9.0, Google Chrome від версії 4.0, Safari від версії 3.1, Firefox від версії 3.5 і Opera від версії 10.

WOFF 2.0 шрифти мають деяку перевагу перед WOFF 1.0 через кращих можливостей стиснення. Вони не підтримуються Safari і Internet Explorer, але відмінно працюють з Google Chrome версії 36.0 і вище, Firefox версії 35.0 і вище і Opera від версії 26.0.

Ці шрифти є компактними шрифтами OTF і використовуються на сторінці в якості вбудованих шрифтів. Вони підтримуються всіма великими браузерами.

Якщо ви знайшли шрифт, який ви хотіли б використовувати на вашому сайті WordPress, але не впевнені чи сумісний він з браузерами, використовуйте Web Font Generator tool . Цей інструмент дозволить вам конвертувати практично будь-який шрифт в доброзичливий для вебу формат.

1. Увійдіть в Web Font Generator tool .
2. Натисніть кнопку Upload (Завантажити) (1) для завантаження вашого шрифту, підтвердіть, що шрифти можуть бути легально використані для вбудовування на веб-сторінку (2).
3. Натисніть кнопку Download (Завантажити) (3) і збережіть .zip архів у вас на комп'ютері.

1. Всередині архіву ви знайдете шрифти в форматі WOFF і WOFF 2.0 разом з CSS файлом і демо HTML сторінкою. Ці шрифти підтримуються практично всіма браузерами.

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

Що вам знадобиться

Перед тим, як ви почнете це керівництво, вам знадобиться наступне:

• Доступ до панелі управління WordPress
• Доступ до панелі управління хостингом або FTP (необов'язково)

Варіант 1 - Установка шрифтів через плагіни

Модулі - це найлегший шлях для того, щоб встановити шрифт на сайт WordPress. Ось список з декількох найпопулярніших плагінів для цих цілей:

WP Google Fonts

За допомогою WP Google font ви можете легко встановити шрифт на WordPress. Цей плагін автоматично впроваджує код на ваш сайт. Також він дає вам можливість застосувати призначені для користувача шрифти до певних елементів CSS з панелі управління WordPress.

просто встановіть цей плагін з офіційного сховища WordPress і відкрийте розділ Google Fonts. Тут ви побачите панель управління шрифтами Google. Вибирайте шрифти і змінюйте різні настройки, такі як стиль шрифту, елементи яких він застосовується і т. Д.

Typekit Fonts For WordPress

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

Після створення свого набору, встановіть плагін Typekit Fonts For WordPress. Для настройки даного плагіна, перейдіть в розділ Налаштування → Typekit fonts і вставте ваш код для вбудовування, отриманий на сайті. Плагін автоматично завантажить шрифти додані в ваш набір.

Use Any Font

Use Any Font - це ще один плагін, який дозволить вам встановити шрифт на сайт.

Ви можете встановити плагін з офіційного сховища WordPress. Після того як установка буде завершена, перейдіть в розділ Use any font, створіть ключ API і натисніть кнопку Verify.

Після перевірки ви зможете завантажувати шрифти в форматах ttf, otf і woff. Плагін також дозволяє вам застосовувати шрифти до певних елементів.

Варіант 2 - Як встановити шрифт на сайт в WordPress вручну

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

1. Скачайте шрифт на ваш комп'ютер.
2. Зазвичай шрифти йдуть в .zip архіві. Вийміть його.
3. Тепер вам потрібно завантажити файл шрифту (використовуйте FTP-клієнт або Файловий Менеджер) в каталог wp-content / themes / ваша-тема / fonts (створіть папку fonts, якщо такої не створено). У нашому прикладі, ми завантажили шрифт Lobster-Regular.ttf.

1. Тепер пройдіть в панель управління WordPress і відкрийте Зовнішній вигляд → Редактор. Виберіть файл style.css, перейдіть в кінець файлу і додайте наступний код (не забудьте змінити значення font-family і url на ваші):

@ Font-face {font-family: Lobster-Regular; src: url (http://hostinger-tutorials.com/wp-content/themes/twentyfifteen/fonts/Lobster-Regular.ttf); font-weight: normal; }

1. Натисніть Оновити файл для збереження змін.

Тепер, код font-face буде завантажуватися при кожному відвідуванні вашого сайту. Однак поки шрифт не використовується для будь-яких елементів. Поки ви не побачите ніяких змін в інтерфейсі. Щоб призначити шрифт для певного елемента, вам необхідно відредагувати той же файл style.css. Наприклад, наступний код застосує шрифт Lobster до нашого назвою сайту:

.site-title {font-family: "Lobster-Regular", Arial, sans-serif; }

На зображенні нижче ви можете побачити результат.

висновок

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