Как добавить шрифт в Wordpress редакторе и на сайте
Опубликовано: 23.08.2018
Недавно в комментариях поста о продвинутом редакторе TinyMCE Advanced меня спросили как добавить шрифт в вордпресс дабы у пользователей появилась возможность его выбирать при написании текстов. По идее, это должно немного разнообразить оформление вашего контента. Данный вопрос встречается не первый раз, поэтому я решил подготовить детальное описание этой задачи. Однако кроме ситуации с редактором мы рассмотрим и глобальное подключение шрифтов для WordPress сайта. Тему условно можно раздели на 3 направления:
Добавление шрифтов через CSS
Современная технология HTML5 позволяет работать с TTF шрифтами в CSS стилях. Данный метод скорее относится к возможностям верстки нежели WP системы, поэтому он подходит для всех без исключения сайтов. С его помощью вы сможете влиять не только на контент страниц, но и менять разные элементы шаблона.
Как подключить шрифты в WordPress, Elementor, Astra и любую тему
Представим, что ваш дизайнер захотел внедрить нестандартную типографику в проекте дабы сделать его внешний вид более красивым. И теперь обычное оформление заголовков придется заменить на более выразительное и оригинальное, например так:
Изменить цвет шрифт сайт Wordpress Супер плагин редактор
Алгоритм состоит из двух шагов. Во-первых, перед тем как подключить шрифт к 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-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"> |
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic" rel="stylesheet">
После этого для любого класса и элемента в CSS стилях допускается задание соответствующего семейства шрифта, например, для тех же заголовков:
h1 , h2 { font-family : 'Lobster' , cursive ; } |
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 ; } |
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 ) ) ; } |
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(http://fonts.googleapis.com/css?family=Aclonica); @import url(http://fonts.googleapis.com/css?family=Lato); @import url(http://fonts.googleapis.com/css?family=Michroma); @import url(http://fonts.googleapis.com/css?family=Paytone+One); </style> <?php } |
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(http://fonts.googleapis.com/css?family=Aclonica); @import url(http://fonts.googleapis.com/css?family=Lato); @import url(http://fonts.googleapis.com/css?family=Michroma); @import url(http://fonts.googleapis.com/css?family=Paytone+One); </style> <?php }
В итоге получится что-то вроде этого:
Напоследок в редакторе напишите текст для тестирования, сохраните запись и проверьте получилось ли подключить шрифт к WordPress сайту. Опытные пользователи, которые не хотят использовать сторонний модуль Code Snippets, могут смело размещать все сниппеты в файле функций functions.php . Источник последнего решения находится тут , если вдруг будут какие-то вопросы или захотите посмотреть код в оригинальной версии.
Надеюсь, теперь вопрос как добавить шрифт в WordPress не вызовет у вас особой сложности. Еще советую глянуть статью про изменение цвета текста в WordPress редакторе (в частности с помощью плагина TinyMCE Color Grid). Также можете зайти в раздел вордпресс шрифтов дабы просмотреть все заметки по теме. Пожелания и советы оставляйте в комментариях.