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. При редактировании текста слайда вручную вводим название шрифта в соответствующее поле.

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

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

Календарь записей
Май 2020
Пн Вт Ср Чт Пт Сб Вс
 123
45678910
11121314151617
18192021222324
25262728293031
Copyright © 2020 Все права защищены