Дек
26
10

Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе

Установка шрифта в wordpressНедавно в комментариях поста о продвинутом редакторе TinyMCE Advanced меня спросили как добавить шрифт в вордпресс дабы у пользователей появилась возможность его выбирать при написании текстов. По идее, это должно немного разнообразить оформление вашего контента. Данный вопрос встречается не первый раз, поэтому я решил подготовить детальное описание этой задачи. Однако кроме ситуации с редактором мы рассмотрим и глобальное подключение шрифтов для WordPress сайта. Тему условно можно раздели на 3 направления:

Добавление шрифтов через CSS

Современная технология HTML5 позволяет работать с TTF шрифтами в CSS стилях. Данный метод скорее относится к возможностям верстки нежели WP системы, поэтому он подходит для всех без исключения сайтов. С его помощью вы сможете влиять не только на контент страниц, но и менять разные элементы шаблона.

Представим, что ваш дизайнер захотел внедрить нестандартную типографику в проекте дабы сделать его внешний вид более красивым. И теперь обычное оформление заголовков придется заменить на более выразительное и оригинальное, например так:

Добавление шрифтов в WordPress

Алгоритм состоит из двух шагов. Во-первых, перед тем как подключить шрифт к WordPress сайту вам нужно будет «раздобыть» соответствующий файл шрифтов и загрузить его на хостинг в ту же директорию, где находится style.css. Для работы можете скачать бесплатный FTP клиент Mozilla.

Подключаем шрифт к WordPress сайту

Далее открываете файл стилей 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 шрифтов в WordPress

При открытии окна увидите инструкцию по интеграции шрифтов Google с сайтом. Во вкладке «Customize» сможете выбрать поддержку кирилицы (если нужно), после чего базовый код вставки немного изменится. Добавляете его в файл шаблона header.php.

<link href="https://fonts.googleapis.com/css?family=Lobster&amp;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 }

В итоге получится что-то вроде этого:

Оригинальный шрифт в TinyMCE Advanced

Напоследок в редакторе напишите текст для тестирования, сохраните запись и проверьте получилось ли подключить шрифт к WordPress сайту. Опытные пользователи, которые не хотят использовать сторонний модуль Code Snippets, могут смело размещать все сниппеты в файле функций functions.php. Источник последнего решения находится тут, если вдруг будут какие-то вопросы или захотите посмотреть код в оригинальной версии.

Надеюсь, теперь вопрос как добавить шрифт в WordPress не вызовет у вас особой сложности. Еще советую глянуть статью про изменение цвета текста в WordPress редакторе (в частности с помощью плагина TinyMCE Color Grid). Также можете зайти в раздел вордпресс шрифтов дабы просмотреть все заметки по теме. Пожелания и советы оставляйте в комментариях.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 10, средний балл: 6,60 из 7)
Загрузка...

категория Категории: Возможности; Начинающим;
теги Теги: , , , , .

комментариев 10 к статье “Как подключить шрифт в WordPress: через CSS, из Google Fonts, в редакторе”

  • voloslekar   26.12.2016

    то-то у меня не получается ничерта) Уже второй раз в жизни пробую и нифига) Гугловские шрифты ок работают, а локальные не подключаются и хоть ты тресни)

    Не нашёл причину, но нашёл выход: локально не работает, как заливаю на сервак — всё ок. При чём локально я пробую как обращаясь через файловую систему /home/user/… в браузере, так и через веб-сервер — http://localhost/… — не работает и всё тут.

  • voloslekar   26.12.2016

    Спасибо за статью. В первый раз в жизни подключал шрифт на сайт и получилось с первого раза.

  • Tod   27.12.2016

    voloslekar, рад, что статья пригодилась. С localhost иногда бывают разные необъяснимые глюки, главное чтобы на сервере работало:)

  • Виктория   13.02.2017

    Спасибо за детальную инструкцию. Я в вордпресс пока новичок, но вот захотелось подключить нестандартный шрифт к теме сайта.

  • imran   10.11.2017

    Вот ни как не могу изменить шрифт бесплатного шаблона Eggnews. Не знаешь как изменить?

  • Tod   10.11.2017

    imran, первым делом я бы поискал в настройках темы — иногда разработчик добавляет шрифты в WordPress админку. Второй вариант — найти и подправить свойство font-family в style.css шаблона, третий — дописать внизу этого файла свои стили, которые бы перезаписывали базовый. Как правило, шрифты указываются в font-family.

  • Евгения   27.02.2018

    Класс! Наконец-то нашла то, что нужно. Все получилось. Благодарю!

  • Vitos   19.09.2018

    Приветствую. Спасибо за материал, но сейчас с гугловскими шрифтами подругому все, можете расписать?
    Благодарю

  • Tod   20.09.2018

    Vitos, а что именно там изменилось? зашел на сайт гугл шрифтов — выбрал один из вариантов — при отркытии вкладки есть инструкция по внедрению. То есть все точно также, как и в моей статье, поэтому слегка не понял о чем речь.

  • Дмитрий   17.12.2018

    Перерыл весь интернет, но только здесь нашел решение.
    Спасибо автору за действенный метод,

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости