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

Опубликовано: ADv Дата 31.08.2015 в рубрике Своя тема Комментировать

Иногда вам может понадобиться добавить собственные шрифты в WordPress. Они помогут освежить дизайн вашей темы и сделать ее запоминающейся. В сегодняшней статье мы покажем вам как добавить собственные шрифты в WordPress, используя Google Fonts, TypeKit, и CSS3 @Font-Face.

Использование нестандартных шрифтов в темах WordPress стало общим трендом. По сути, существуют темы, содержащие в себе сотни шрифтов. Однако, загрузка такого их количества может замедлить ваш сайт. Именно поэтому мы покажем вам как правильно загружать пользовательские шрифты, чтобы не увеличить скорость загрузки страниц сайта.

Как найти шрифты для использования их в WordPress

Раньше шрифты были дорогими, но сейчас все изменилось. Существует много мест, где можно найти бесплатные веб шрифты, а именно: Google Fonts, Typekit, FontSquirrel, и fonts.com.

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

Добавляем шрифты в WordPress из Google Fonts

Google fonts является бесплатным ресурсом, позволяющим добавлять интересную типографику в ваши дизайнерские проекты. Пользователи WordPress могут добавлять шрифты с Google fonts на свои сайты.

Просто переходим в Google fonts library и выбираем шрифт, который хотим использовать. Далее, кликаем на кнопку quick use под шрифтом.

Мы окажемся на другой странице, где нас попросят выбрать стили. Рекомендуется выбирать только те стили, которые будут реально использоваться.

После этого прокрутите немного и увидите раздел с кодом для встраивания. Необходимо скопировать этот код и вставить его в файл header.php своей темы сразу после тега <head>.

Вот вы и добавили Google font на свой сайт WordPress.
Использовать шрифт можно в таблице стилей вашей темы следующим образом:

.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}

Добавляем шрифты в WordPress с помощью Typekit

Typekit — это еще один бесплатный и премиумный ресурс для шрифтов, которые можно использовать в своих проектах. Просто зарегистрируйте аккаунт и создайте новый kit.

Далее, нужно выбрать шрифт из Typekit library и добавить его в свой кит, после чего получить код для добавления на свой сайт.

Вам также потребуется установить и активировать плагин Typekit Fonts for WordPress. После активации просто перейдите в Внешний вид » Typekit Fonts и вставьте полученный код на странице настроек плагина.

Вот и все, теперь можно использовать выбранный вами шрифт Typekit в таблице стилей темы WordPress:

h1 .site-title {
font-family: 'modesto-condensed', Arial, sans-serif;
}

Добавляем шрифты в WordPress с помощью CSS3 @font-face

Самым «прямым» способом добавления собственных шрифтов в WordPress является их добавление с помощью CSS3 @font-face . Этот способ позволяет вам использовать любой шрифт на ваш выбор на своем сайте.

Первым делом вам необходимо скачать понравившийся шрифт в веб формате. Если же нет веб формата для вашего шрифта, то его можно сконвертировать с помощью FontSquirrel Webfont generator.

Как только вы получить файлы веб-шрифта, вам нужно загрузить из на свой хостинг.

Лучшим место будет новая папка “fonts” в директории в вашей темой.

Для того, чтобы загрузить шрифт, можно использовать FTP или файловый менеджер своего хостинга.

После того, как вы загрузите шрифт, необходимо подключить его в таблице стилей своей темы с помощью правила CSS3 @font-face, вот так:

@font-face {
	font-family: Arvo;
	src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
	font-weight: normal;
}

Не забудьте изменить font-family и ссылку на свои собственные. После этого вы можете использовать шрифт где угодно в таблице стилей следующим образом:

.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}

Загрузка шрифтов напрямую с помощью CSS3 @font-face — не всегда самое лучшее решение. Если вы используете шрифт, который есть в Google Fonts или Typekit, то лучше, чтобы он загружатся с их сервера для оптимальной производительности вашего сайта.

Вот и все. Мы надеемся, что эта статья помогла вам добавить собственные шрифты в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Rating: 2.4/5 (10 votes cast)