как изменить загрузить шрифт на сайт

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

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


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

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

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

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

и др.

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

как изменить загрузить шрифт на сайт

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

fonts201

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

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

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

fonts202

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

fonts203

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

fonts3

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

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

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

Например, назовем ее «fonts»:

fonts301

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

fonts303

Папка «specimen_files» — не нужна, поэтому можно ее не копировать в папку «fonts».

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

fonts302

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;
}

 

На этом все!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *