Как изменить шрифт в wordpress (добавляем свой шрифт)

Здравствуйте, сегодня рассмотрим процесс изменения шрифта на сайте wordpress, а именно скачаем шрифт, преобразуем его, применим шрифт к сайту.

Скачать исходники для статьи можно ниже

Для начала предлагаю вам исходник – скачать исходник – это дочерняя тема с установленным шрифтом, в данном примере Alex Brush (только для английских слов).
Установка дочерней темы – стандартная – заходим в панель управления wordpress – выбираем пункт “Внешний вид” и его подпункт “Темы” – далее жмем ссылку “Добавить новую” – после ссылку “Загрузить тему”, а далее выбираем скаченный zip архив дочерней темы. Дочерняя тема к стандартной теме Twenty Fifteen, которая должна быть установлена на вашем сайте.

1. Скачаем шрифт в интернете – есть много сайтов с английскими и русскими шрифтами:

“fontsquirrel.com” (английские шрифты)

и др.

Для примера скачаем вот этот шрифт:

Жмем на кнопку и загружаем шрифт в формате OTF – на компьютер загрузиться zip архив.
Распаковываем zip архив и получаем папочку с файлами:

Здесь мы находим файл шрифта и текстовой документ о лицензии.

2. Преобразуем шрифт:

Заходим на сайт: “fontsquirrel.com/tools/webfont-generator”

Здесь нажимаем кнопку “UPLOADS FONTS” и открываем файл шрифта, в нашем примере: “AlexBrush-Regular”.
Далее ставим галочку и жмем кнопку “DOWNLOAD YOUR KIT”:

После чего на компьютер закачается zip архив – распаковываем его и получаем папку со следующими файлами:

3. Создаем дочернюю тему сайта:

О создании дочерней темы wordpress читайте тут:
– “codex.wordpress.org/Дочерние_темы”
– Как создать папку с помощью php, для примера будем создавать дочернюю тему.

4. Создаем папку для наших шрифтов в папке дочерней темы, созданной нами в пункте 3.

Например, назовем ее “fonts”:

И загружаем в папку “fonts” файлы шрифта:

Папка “specimen_files” – не нужна, поэтому можно ее не копировать в папку “fonts”.

Далее для простоты я переименовал некоторые файлы:

5. Прописываем в файле стилей нашей дочерней теме следующий код:

@font-face { 
 font-family: 'mnogofont'; 
 src: url('fonts/mnogofont.eot'); /* IE9 Compat Modes */ 
 src: url('fonts/mnogofont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
 url('fonts/mnogofont.woff') format('woff'), /* Modern Browsers */ 
 url('fonts/mnogofont.ttf') format('truetype'), /* Safari, Android, iOS */ 
 url('fonts/mnogofont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
}

body {
text-rendering: optimizelegibility;
font-family: mnogofont;
font-size: 16px;
font-weight: 400;
}


h1, h2, h3, h4, h5, h6 {
text-rendering: optimizelegibility;
font-family: mnogofont;
font-weight: 600;
letter-spacing: 0px;
}

На этом все!