Свои шрифты на сайте

Сейчас я расскажу вам про два правильных способа задействовать любые шрифты на сайте на Вордпресс без вмешательства в код вашей темы.

 

Способ 1

Он заключается в элементарном использовании уже готовых веб-шрифтов с сервисов типа Google Fonts. Плюсом этого подхода является его простота и оптимизированность этих шрифтов для использования на сайтах. Минусом — довольно ограниченный выбор кириллических шрифтов.

Итак, давайте подключим какой-нить кириллический шрифт Google Fonts.

Например, Philosopher. Нажимаем там кнопку Select this font, и снизу появится панелька c выбранным шрифтами. Там жмем на import и видим:

Свой шрифт на сайте

 

Эту строчку копируем:

@import url('https://fonts.googleapis.com/css?family=Philosopher');

 

И вставляем в Внешний вид — Настроить — Дополнительные стили:

Свой шрифт на сайте

 

Вуаля! Теперь осталось решить, применим ли мы этот шрифт ко всему сайту или, например, только к меню.

Ко всему сайту обычно делается так — вставьте этот код в дополнительные стили пониже:

body {
  font-family: 'Philosopher', sans-serif;
}

 

И видим сразу результат!

Свой шрифт на сайте

 

Если нужно применить только к меню, то должен сработать такой код, если верстка вашей темы не выходит за рамки приличий:

nav {
  font-family: 'Philosopher', sans-serif;
}

 

Таким образом вы можете подключить любой шрифт с Google Fonts на свой сайт. Но будьте внимательны при выборе шрифта, чтобы он поддерживал кириллицу.

 

Способ 2. Для продвинутых — с использованием дочерней темы.

Что делать, если вы нарисовали свой шрифт хотите загрузить свой шрифт, которого нет у гугла?
Начнем с того, что для использования в веб недостаточно только одного файла шрифта в формате TTF. Его нужно сконвертировать с помощью онлайн-конвертеров в несколько форматов. Итак.

 

Шаг 1. Конвертация шрифта.

Берем ваш шрифт и конвертируем его, например, здесь.
Распакуем полученную папку и увидим, что всё разложено по полочкам:

Свой шрифт на сайте

 

Шаг 2. Создание дочерней темы

Если вы используете шаблон, который часто обновляется, то имеет смысл сделать дочернюю тему, которая позволит вам не потерять внесенные изменения при очередном обновлении.

Итак, для этого заходим по FTP в папку с темами. Я буду делать это на примере шаблона Ocean. Создаем пустую папку с таким же названием шаблона, но с добавлением child:

Свой шрифт на сайте

 

В этой папке создаем файл style.css со следующим содержимым:

/*
Theme Name:     Ocean Child
Theme URI:      http: //yarovikov.com/
Description:    Котики просыпаются весной 
Author:         yarovikov
Author URI:     http: //yarovikov.com/
Template:       ay-ocean 
Version:        0.1.0
*/

@import url("../ay-ocean/style.css"); /* берем стили с родительской темы */

Template — это название папки с родительской темой (обязательно с соблюдением регистра).

 

Затем копируем скачанную папку с шрифтами (только папку fonts):

Свой шрифт на сайте

 

Из той же папки из файла fonts.css копируем это и вставляем в наш style.css:

@font-face {
	font-family: 'Conv_FiraSansRegular';
	src: url('fonts/FiraSansRegular.eot');
	src: local('☺'), url('fonts/FiraSansRegular.woff') format('woff'), url('fonts/FiraSansRegular.ttf') format('truetype'), url('fonts/FiraSansRegular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

 

Теперь можно применять этот шрифт к чем угодно. Давайте ко всему сайту. Добавим ниже:

body {
	font-family: 'Conv_FiraSansRegular';
}

 

Теперь перейдем в список тем и увидим нашу свежесозданную Ocean Child 🙂

Свой шрифт на сайте

 

После активации дочерней темы мы увидим сайт с новым шрифтом. Но есть нюанс — поскольку по факту это новая тема, просто использующая функционал родительской, все изменения, внесенные через кастомайзер ранее, здесь придется проделать заново. Такие дела.