Содержание
Как добавить пользовательские шрифты в WordPress
Я давно хотел написать статью о том, что Google Fonts загружается локально, и, наконец, вчера вечером я внес изменения на своем сайте в способ загрузки шрифтов в Crunchify.
До сих пор я использовал Google шрифты Oswald and Lato на Crunchify.com. Как вы могли видеть ниже, в файле functions.php моей темы я ставил оба шрифта в очередь и использовал его напрямую, вызывая fonts.googleapis.com.
|
1
|
wp_enqueue_style ( Google-шрифты , '//fonts.googleapis.com/css?family=Oswald:400,700|Lato:400,400i,700' , массив ( ) , PARENT_THEME_VERSION ) ;
|
Что ж, в этом нет ничего плохого, но в качестве цели оптимизации скорости WordPress , почему бы не загружать фонды с вашего сайта самостоятельно, что экономит вам почти 7 или более запросов внешнего API.
Check it out: Откройте URL, который вы видите на изображении выше, в новой вкладке, и вы увидите, что внутри он делает еще 14 fonts.gstatic.com API звонки и это не хорошо good
|
1
|
http : //fonts.googleapis.com/css?family=Oswald%3A400%2C700%7CLato%3A400%2C400i%2C700&ver=2.4.2
|
Также есть еще один момент:
Независимо от того, какие шрифты вам нужны во время выполнения или на конкретной странице, курсивом, жирным или обычным шрифтом, выше API шрифтов Google загружает все шрифты на каждой странице, которые абсолютно не требуются .
Этот урок также поможет, если у вас есть следующие вопросы:
- Как встраивать шрифты в CSS?
- Как загрузить внешние шрифты в документ HTML ?
- Как я могу использовать
webfontsв WordPress - Руководство для начинающих по использованию веб-шрифтов Google
- Загрузите WordPress шрифты с помощью CSS
- Загрузить и использовать
TypeKitшрифты в WordPress - Добавление пользовательских шрифтов в WordPress с помощью @ Font-Face и CSS3
Как решить эту проблему и загрузить шрифты локально?
Давайте начнем:
Шаг 1
- Выберите ваши любимые шрифты, которые вы хотите на своем сайте. В этом уроке мы выберем
Latoшрифты в качестве примера. - Перейдите в Google Fonts и загрузите его.
Шаг 2
экстракт Lato.zip файл, и вы увидите все 10 Lato fonts with .ttf расширение файла. Обычно вам просто нужны обычные, жирные и курсивные шрифты на вашем сайте.
Идите дальше и удалите оставшиеся файлы и просто оставьте ниже 3 файла
- Лато-Regular.ttf
- Лато-Bold.ttf
- Лато-Italic.ttf
Шаг 3
Теперь вам нужно конвертировать ваши шрифты в woff2, eot, svg, ttf, wof форматы. Зайдите на сайт https://font-converter.net/en и вы сможете загрузить .ttf файл, который преобразует шрифт во все эти форматы.
Шаг 4
Поместите все ваши новые файлы шрифтов под themes/fonts/lato папка. В этом случае это /public_html/wp-content/themes/fonts/lato папка.
Шаг 5
Откройте свою тему style.css файл и поставить ниже код:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/ * шрифты:
================================================== =============================== * /
/ * лато регулярный * /
@ font — face {
font — family : «Лато» ;
источник : url ( '../fonts/lato/Lato-Regular.eot' ) ;
источник : url ( '../fonts/lato/Lato-Regular.eot?#iefix' ) формат ( «внедренный-опентип» ) ,
url ( '../fonts/lato/Lato-Regular.woff2' ) формат ( 'woff2' ) ,
url ( '../fonts/lato/Lato-Regular.woff' ) формат ( 'woff' ) ,
url ( '../fonts/lato/Lato-Regular.ttf' ) формат ( 'TrueType' ) ,
url ( '../fonts/lato/Lato-Regular.svg#Lato_regularregular' ) формат ( 'svg' ) ;
шрифт — вес : 400 ;
стиль шрифта : нормальный ;
}
/ * Лато курсив * /
@ font — face {
font — family : «Лато» ;
источник : url ( '../fonts/lato/fonts/lato/Lato-Italic.eot' ) ;
источник : url ( '../fonts/lato/fonts/lato/Lato-Italic.eot?#iefix' ) формат ( «внедренный-опентип» ) ,
url ( '../fonts/lato/fonts/lato/Lato-Italic.woff2' ) формат ( 'woff2' ) ,
url ( '../fonts/lato/fonts/lato/Lato-Italic.woff' ) формат ( 'woff' ) ,
url ( '../fonts/lato/fonts/lato/Lato-Italic.ttf' ) формат ( 'TrueType' ) ,
url ( '../fonts/lato/fonts/lato/Lato-Italic.svg#Lato_regularitalic' ) формат ( 'svg' ) ;
шрифт — вес : 400 ;
стиль шрифта : курсив ;
}
/ * Лато жирный * /
@ font — face {
font — family : «Лато» ;
источник : url ( '../fonts/lato/Lato-Bold.eot' ) ;
источник : url ( '../fonts/lato/Lato-Bold.eot?#iefix' ) формат ( «внедренный-опентип» ) ,
url ( '../fonts/lato/Lato-Bold.woff2' ) формат ( 'woff2' ) ,
url ( '../fonts/lato/Lato-Bold.woff' ) формат ( 'woff' ) ,
url ( '../fonts/lato/Lato-Bold.ttf' ) формат ( 'TrueType' ) ,
url ( '../fonts/lato/Lato-Bold.svg#Latobold' ) формат ( 'svg' ) ;
шрифт — вес : 700 ;
стиль шрифта : нормальный ;
}
|
Кроме того, обновить font-family Где бы вы ни хотели использовать шрифт Lato на своем сайте.
|
1
2
3
4
5
6
7
8
|
тело {
цвет фона : #fff;
цвет : # 000;
font — family : 'Лато' , без засечек ; // где вы хотите использовать шрифт Lato
размер шрифта : 17px ;
линия — высота : 1,8 ! важно ;
межбуквенный интервал : 0,25 пикселей ;
}
|
Шаг 6
- Перейти к файлу functions.php темы
- Удалите увлекательные шрифты из API шрифтов Google
- в моем случае эта строка:
wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css?family=Oswald:400,700|Lato:400,400i,700', array (), PARENT_THEME_VERSION);
- в моем случае эта строка:
- Сохранить файл
И это все. Вы успешно загружаете шрифты из локальной файловой системы
Давайте проверим, работает ли он или нет?
- Теперь очистите ваш браузер и файлы кэша блога .
- Перезагрузите свой блог
- Осмотреть элемент
- Перейти на вкладку Сеть
- Проверить
Lato woff2 fontи вы увидите его загруженным из вашей файловой системы
На Crunchify мы используем geomanist шрифты для заголовка и body font-family.
0.00 (0%) 0 votes
