featured-image

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

Бывают ситуации, когда заказчик настаивает на шрифте, которого нет в теме. Если он знает название требуемого шрифта, то подключение его к Вордпресс занимает 10 минут.

Рассмотрим это на примере шрифта TT Norms Light.

  1. Гуглим разработчика шрифта. В нашем случае шрифт распространяется бесплатно, что радует.
  2. Скачиваем файлы с расширениями OET, TTF и WOFF.
  3. Помещаем их в ту же папку, где лежит style.css
  4. В самом style.css прописываем следующий код:
    @font-face {
    font-family: ‘TT Norms Light’;
    src: url(‘TTNorms-Light.eot’);
    src: url(‘TTNorms-Light.eot?#iefix’) format(’embedded-opentype’),
    url(‘TTNorms-Light.woff’) format(‘woff’),
    url(‘TTNorms-Light.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
    }
  5. А дальше вы можете присвоить этот шрифт любому содержимому. Например
    .my_font {font-family: ‘TT Norms Light’;}
    Можете заменить все шрифты на новый, можете свой стиль присвоить определенным блокам — дело ваше.

Внимание! Код должен быть прописан в файле style.css, в разделе Дополнительные стили он у меня почему-то не заработал.

По аналогии можно использовать любой шрифт, заменив названия.

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

В принципе, все то же самое.

  1. Скачиваем, распаковываем и загружаем шрифты
  2. Прописываем абсолютные пути к файлам шрифтов:
    @font-face {
    font-family: ‘open_sansbold’;
    src: url(‘http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot’);
    src: url(‘http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.woff’) format(‘woff’),
    url(‘http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.ttf’) format(‘truetype’),
    url(‘http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.svg#open_sansbold’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }
  3. Полученный код размещаем в разделе Custom CSS/Javascript на странице настроек конкретного слайдера.
  4. При редактировании текста слайда вручную вводим название шрифта в соответствующее поле.

Внимание! Заголовки так не редактируются. Им приходится присваивать каждому нужный стиль.

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

Календарь записей
Март 2021
Пн Вт Ср Чт Пт Сб Вс
1234567
891011121314
15161718192021
22232425262728
293031  
Copyright © 2020 Все права защищены