Разработчикам, Статьи

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

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

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

Back to list

Related Posts