Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе
Недавно в комментариях поста о продвинутом редакторе TinyMCE Advanced меня спросили как добавить шрифт в вордпресс дабы у пользователей появилась возможность его выбирать при написании текстов. По идее, это должно немного разнообразить оформление вашего контента. Данный вопрос встречается не первый раз, поэтому я решил подготовить детальное описание этой задачи. Однако кроме ситуации с редактором мы рассмотрим и глобальное подключение шрифтов для WordPress сайта. Тему условно можно раздели на 3 направления:
- реализация с помощью CSS стилей;
- использование Google Fonts;
- установка новых пользовательских шрифтов в WordPress редакторе.
Добавление шрифтов через CSS
Современная технология HTML5 позволяет работать с TTF шрифтами в CSS стилях. Данный метод скорее относится к возможностям верстки нежели WP системы, поэтому он подходит для всех без исключения сайтов. С его помощью вы сможете влиять не только на контент страниц, но и менять разные элементы шаблона.
Представим, что ваш дизайнер захотел внедрить нестандартную типографику в проекте дабы сделать его внешний вид более красивым. И теперь обычное оформление заголовков придется заменить на более выразительное и оригинальное, например так:
Алгоритм состоит из двух шагов. Во-первых, перед тем как подключить шрифт к WordPress сайту вам нужно будет «раздобыть» соответствующий файл шрифтов и загрузить его на хостинг в ту же директорию, где находится style.css. Для работы можете скачать бесплатный FTP клиент Mozilla.
Далее открываете файл стилей style.css и вставляете туда код:
@font-face { font-family: 'Lobster'; src: url('lobster-regular.ttf'); } h1, h2 { font-family: 'Lobster', 'Georgia', serif; } |
В данном случае вы сначала задаете новый font-family, указывая соответствующий TTF файл, а затем используете его в качестве шрифта для заголовков H1, H2.
Я тестировал код на последних версиях Firefox, IE, Chrome и Opera — все прошло хорошо. Однако, далеко не все старые версии браузеров поддерживают такой код. Следующая статья содержит таблицу совместимости решения, а также полезную информацию о разных проблемах, что могут возникнуть в процессе реализации.
Если же вы хотите охватить все случаи (в том числе и IE 6-8), то придется немного расширить базовый код.
Шрифты Google в WordPress
Наверняка многие из вас знают проект Google Fonts, позволяющий использовать на сайте нестандартную типографику. Давайте рассмотрим как добавить шрифт в вордпресс с помощью данного сервиса. Первым делом заходите на сайт fonts.google.com и выбираете нужный вариант. Далее кликаете по кнопке «Select this font» и внизу страницы появится «панелька» с выбранными фонтами.
При открытии окна увидите инструкцию по интеграции шрифтов Google с сайтом. Во вкладке «Customize» сможете выбрать поддержку кирилицы (если нужно), после чего базовый код вставки немного изменится. Добавляете его в файл шаблона header.php.
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic" rel="stylesheet"> |
После этого для любого класса и элемента в CSS стилях допускается задание соответствующего семейства шрифта, например, для тех же заголовков:
h1, h2 { font-family: 'Lobster', cursive; } |
В этом же окне есть ссылка для скачивания шрифта. Если хотите, можете загрузить TTF файл и с помощью описанного выше метода установить шрифт на WordPress сайт без зависимости от сторонних сервисов. Хотя время загрузки с Google Fonts достаточно высокое, и проекту Google вполне заслуживает доверия.
Подключение шрифтов в TinyMCE Advanced
Рассмотрим задачу как добавить новый пользовательский шрифт в WordPress редакторе TinyMCE Advanced. Хочется отдельно подчеркнуть, что решение работает именно под данный конкретный модуль, а стандартному текстовому редактору может и не подойти! Также в процессе используем плагин сниппетов Code Snippets (для большей наглядности) — вам не нужно будет вносить правки в functions.php, а сможете сделать это через интерфейс админки. Всего потребуется создать 3 сниппета:
1. Сначала реализуем выбор шрифтов в выпадающем меню TinyMCE Advanced.
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' ); function wpex_mce_google_fonts_array( $initArray ) { //$initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; $theme_advanced_fonts = 'Aclonica=Aclonica;'; $theme_advanced_fonts .= 'Lato=Lato;'; $theme_advanced_fonts .= 'Michroma=Michroma;'; $theme_advanced_fonts .= 'Paytone One=Paytone One'; $initArray['font_formats'] = $theme_advanced_fonts; return $initArray; } |
2. Затем создаем отображение оформления текста в редакторе.
add_action( 'admin_init', 'wpex_mce_google_fonts_styles' ); function wpex_mce_google_fonts_styles() { $font1 = 'http://fonts.googleapis.com/css?family=Aclonica:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font1 ) ); $font2 = 'http://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font2 ) ); $font3 = 'http://fonts.googleapis.com/css?family=Michroma:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font3 ) ); $font4 = 'http://fonts.googleapis.com/css?family=Paytone+One:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font4 ) ); } |
3. На последнем этапе добавляем импорт стилей внутри WP и на самом сайте. Кстати, первые 2 сниппета можно настроить для работы только в админке, а последний должен быть подключен и в бэкенде, и во фронтенде.
add_action( 'admin_head-post.php', 'cwc_fix_html_editor_font' ); // add_action( 'admin_head-post-new.php', 'cwc_fix_html_editor_font' ); add_action( 'wp_head', 'cwc_fix_html_editor_font' ); function cwc_fix_html_editor_font() { ?> <style> @import url(https://fonts.googleapis.com/css?family=Aclonica); @import url(https://fonts.googleapis.com/css?family=Lato); @import url(https://fonts.googleapis.com/css?family=Michroma); @import url(https://fonts.googleapis.com/css?family=Paytone+One); </style> <?php } |
В итоге получится что-то вроде этого:
Напоследок в редакторе напишите текст для тестирования, сохраните запись и проверьте получилось ли подключить шрифт к WordPress сайту. Опытные пользователи, которые не хотят использовать сторонний модуль Code Snippets, могут смело размещать все сниппеты в файле функций functions.php. Источник последнего решения находится тут, если вдруг будут какие-то вопросы или захотите посмотреть код в оригинальной версии.
Надеюсь, теперь вопрос как добавить шрифт в WordPress не вызовет у вас особой сложности. Еще советую глянуть статью про изменение цвета текста в WordPress редакторе (в частности с помощью плагина TinyMCE Color Grid). Также можете зайти в раздел вордпресс шрифтов дабы просмотреть все заметки по теме. Пожелания и советы оставляйте в комментариях.
комментариев 10 к статье “Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,90 из 7, голосов - 48)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
то-то у меня не получается ничерта) Уже второй раз в жизни пробую и нифига) Гугловские шрифты ок работают, а локальные не подключаются и хоть ты тресни)
Не нашёл причину, но нашёл выход: локально не работает, как заливаю на сервак — всё ок. При чём локально я пробую как обращаясь через файловую систему /home/user/… в браузере, так и через веб-сервер — http://localhost/… — не работает и всё тут.
Спасибо за статью. В первый раз в жизни подключал шрифт на сайт и получилось с первого раза.
voloslekar, рад, что статья пригодилась. С localhost иногда бывают разные необъяснимые глюки, главное чтобы на сервере работало:)
Спасибо за детальную инструкцию. Я в вордпресс пока новичок, но вот захотелось подключить нестандартный шрифт к теме сайта.
Вот ни как не могу изменить шрифт бесплатного шаблона Eggnews. Не знаешь как изменить?
imran, первым делом я бы поискал в настройках темы — иногда разработчик добавляет шрифты в WordPress админку. Второй вариант — найти и подправить свойство font-family в style.css шаблона, третий — дописать внизу этого файла свои стили, которые бы перезаписывали базовый. Как правило, шрифты указываются в font-family.
Класс! Наконец-то нашла то, что нужно. Все получилось. Благодарю!
Приветствую. Спасибо за материал, но сейчас с гугловскими шрифтами подругому все, можете расписать?
Благодарю
Vitos, а что именно там изменилось? зашел на сайт гугл шрифтов — выбрал один из вариантов — при отркытии вкладки есть инструкция по внедрению. То есть все точно также, как и в моей статье, поэтому слегка не понял о чем речь.
Перерыл весь интернет, но только здесь нашел решение.
Спасибо автору за действенный метод,