Вы здесь:   Главная » Вебмастеру    »    Как добавить свой шрифт на WordPress

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

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

Как подключить свой шрифт на WordPress

Основной проблемой является не поиск шрифта, а кроссбраузерность отображение оного. Так как подходящий формат для Mozilla Firefox будет некорректно работать в интерфейсе Internet Explorer, и наоборот. Поэтому прежде чем загрузить шрифт в отведённый каталог на сайте, позаботьтесь о наличии всех форматов.

Рекомендую обратиться за помощью к специальным сервисам генерации шрифтов. Благодаря онлайн-инструментам Вы на выходе получите архив со всеми форматами файлов. Таким сервисом является https://www.fontsquirrel.com/tools/webfont-generator

Далее, после того как у нас появился набор форматов одного шрифта (5 шт.), следует загрузить его в каталог на вашем сайте. Советую создать директорию внутри папки с текущей темой (например с названием «fonts»), а для этого воспользуемся FTP доступом.

Отлично, двигаемся дальше. Теперь требуется подключить шрифт непосредственно на WordPress, добавив соответствующий CSS @font-face. Данный параметр действует на CSS с версии 2.0, и указывает на путь и параметры нового шрифта.

Вставляем ниже представленный код в таблицу CSS стилей вашей темы (файл style.css), указывая путь до каждого файла на вашем сервере:

@font-face {
font-family: 'nazvanie_shrifta';
src: url('nazvanie_shrifta.eot');
src: url('nazvanie_shrifta.eot?#iefix') format('embedded-opentype'),
url('nazvanie_shrifta.woff') format('woff'),
url('nazvanie_shrifta.ttf') format('truetype'),
url('nazvanie_shrifta.svg#HeydingsCommonIconsRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Везде заменяем «nazvanie_shrifta» на название своего шрифта. Сохраняем изменения, и можем пробовать применять шрифт. Для этого создаём новый стиль (class или id) , либо редактируем имеющиеся параметры отображения. Например изменяем текст в области “body” или отдельно для записи «article или single-post (наименование зависит от установленного шаблона)». То есть, мы можем поменять ранее выставленный «font-family: georgia;» на уже подключённый, изменив наименование.

поделиться с друзьями:

обновлено: 11.05.2016

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

Подписаться на почтовую рассылку*
*политика конфиденциальности Google

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

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ознакомиться с пользовательским соглашением

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: