Сышышь ты, выходи сюда,
поговорим !

Как добавить шрифт в Wordpress редакторе и на сайте

Опубликовано: 23.08.2018

видео Как добавить шрифт в Wordpress редакторе и на сайте

Изменение шрифтов на сайте #WordPress плагином

Недавно в комментариях поста о продвинутом редакторе 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&amp;subset=cyrillic" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lobster&amp;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). Также можете зайти в раздел вордпресс шрифтов дабы просмотреть все заметки по теме. Пожелания и советы оставляйте в комментариях.

rss