Як підключити google fonts до шаблону wordpress
Google Fonts - один з кращих ресурсів з безкоштовний веб-шрифтами, і Google дає вам кілька способів імпортувати їх на свій веб-сайт. На жаль, жоден з них не включає популярний движок WordPress. Це означає, що ви повинні або використовувати плагіни, яких дуже багато, або бруднити руки, пораючись з кодом.
Гарна новина полягає в тому, що ви можете встановити будь-який шрифт з бібліотеки Google практично на будь-яку тему WordPress без особливого клопоту. Як саме - ми сьогодні вас навчимо.
Але спочатку хотілося б перерахувати переваги і недоліки Google Fonts, щоб ви остаточно вирішили, використовувати їх в своїх проектах чи ні.
Відео: З HTML в WordPress для новачків (Частина 4). Підключаємо Google Fonts / HTML to WordPress
Хороші і погані Google Web Fonts
Що стосується веб-шрифтів, то Google - один з кращих варіантів з точки зору продуктивності. Все через легкої конструкції, і системи кешування. Відвідувачі не повинні чекати, поки завантажаться Google-шрифти, якщо вони недавно відвідали сайт, на якому використовувалися вони ж. Популярні шрифти, такі як Open Sans, можуть підвищити продуктивність вашого сайту за рахунок скорочення часу завантаження.
Ще однією особливістю є те, що Google дозволяє завантажувати ці шрифти, так що ви можете використовувати їх в своїх макетах.
І наостанок, платформа повністю вільна. Щоб почати використовувати шрифти, потрібно тільки авторизуватися або завести поштову скриньку на Gmail (а у кого сьогодні немає пошти на Gmail?).
з недоліків можна вказати те, що вибір Google-шрифтів невеликий, багато з них схожі один на одного. Потрібно витратити багато часу на пошуки, щоб знайти пристойний, оригінальний шрифт. Шрифтів для кирилиці зовсім мало.
Крім цього, є звичайні проблеми безпеки - вам потрібно вказати деякі особисті дані при установці шрифтів від Google на вашому сайті.
Як встановити шрифти Google за допомогою плагінів WordPress
Якщо ви пошукаєте плагіни, то перше, що побачите в результатах пошуку - плагіни WP Google Fonts і Easy Google Web Fonts. Це дійсно два кращих плагіна.
Модулі не є ідеальним рішенням для установки Google-шрифтів на WordPress сайті - не тільки з точки зору продуктивності, але і тому, що плагіни не дозволяють вибирати певні шматки тексту. Проте, якщо ви або ваш клієнт впевнений, що краще використовувати плагіни, то подивіться на ці два варіанти.
WP Google Fonts
Цей плагін дозволяє орієнтуватися на конкретні елементи, такі як заголовки H1, параграфи і цитати. Ви також отримуєте варіант користувальницького CSS для подальшої роботи зі стилями окремих шрифтів. Додати і налаштувати шрифти від Google на вашому WordPress сайті за допомогою цього плагіна досить легко.
Easy Google Web Fonts
Easy Google Web Fonts виправдовує своє ім`я, і робить установку Google Fonts супер легкої навіть для початківців.
Ви можете використовувати функцію Live Preview для перегляду, тестування та оптимізації шрифтів, не виходячи з веб-сайту, а також створювати свої власні правила шрифту, не написавши жодного рядка коду.
Правильний шлях установки Google Fonts в шаблон WordPress
Відео: WordPress - плагін Easy Google Fonts. Уроки WordPress. Урок # 11
Зрештою, ми приходимо до того варіанту, щоб відкрити файл functions.php і трохи попрацювати з кодом. Перед тим, як зробити це, вам потрібно вибрати шрифт з бібліотеки Google. Заради прикладу, давайте спробуємо взяти дуже популярний Open Sans.
Потім вам потрібно вибрати стиль шрифту - нормальний, жирний або курсив. Це ви в змозі зробити самостійно :)
Після того, як ви виберете стилі, Google дасть вам фрагмент коду. Наш виглядає наступним чином:
Крім того, ми отримали CSS стиль:
font-family: `Open Sans`, sans-serif;
Тепер прийшов час, щоб відкрити файл functions.php (шлях до файлу: wp-content / themes / yourtheme). В кінці файлу додайте нову функцію:
function load_fonts ()
{
wp_register_style ( `et-googleFonts`,
`Http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300`)- wp_enqueue_style (` et-googleFonts `) -
}
add_action ( `wp_print_styles`, `load_fonts`);
Ключем цієї функції є команда `wp_enqueue_style`, яка змушує WordPress викликати таблиці стилів шрифту в заголовку кожної сторінки. Якщо ви уважно подивитеся, то побачите, то ми видалили посилання href = і rel = `stylesheet` type`text / css `, з коду, який нам дав Google, і вам потрібно буде робити те ж саме, якщо ви хочете додати будь-який інший Google-шрифт для вашого сайту на WordPress.
Все, що вам потрібно зробити зараз, це відкрити основний файл CSS і вставити стиль з Open Sans. Тут працюють звичайні правила, тому додайте наступний код в таблицю стилів, збережіть і поновіть:
body
{
font: normal 1em `Open Sans`, sans-serif-
color: # 313131-
}
Цей стиль буде працювати по всьому сайту. До окремих фрагментів тексту ви можете задати інший стиль:
.bold-text
{
font: bold 1em `Open Sans`, sans-serif-
}
Як бачите, насправді все дуже просто. Пробуйте і перевіряйте результат :)
