Как добавить свой шрифт на 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;» на уже подключённый, изменив наименование.
