Иногда вам может понадобиться разместить шрифт локально, вместо использования такой службы, как Google Fonts. В этой статье вы узнаете, как это сделать.
В этой статье мы будем использовать шрифты Google. Однако этот процесс будет работать для любого файла шрифта, который у вас может быть.
Скачивание нашего шрифта
Итак, первый шаг – загрузить шрифт, который мы хотим использовать. Для Google Fonts этот инструмент невероятно полезен.
В левом верхнем углу найдите шрифт, который хотите загрузить.
После того, как вы нажмете на свой шрифт, вы попадете на страницу, где сможете выбрать варианты и загрузить файлы.
Выбирая варианты, обязательно отметьте только те, которые вам нужны. Чем больше вы проверяете, тем тяжелее будет ваша страница.
Следующим шагом на странице является копирование нашего CSS, но мы пока пропустим это и перейдем к шагу 4, который загружает файлы.
На ваш компьютер будет загружен файл .zip, который вы сможете извлечь.
Загрузка нашего шрифта
Примечание. Если вам удобно загружать файлы на сервер через FTP, вы можете пропустить этот шаг и просто загрузить файлы шрифтов в свою дочернюю тему.
Теперь, когда у нас есть файлы шрифтов, нам нужно загрузить их на наш сервер.
По умолчанию медиа-библиотека WordPress не позволяет нам загружать файлы шрифтов. Это связано с проблемами безопасности некоторых из этих файлов.
Однако мы можем временно разрешить загрузку этих файлов, добавив на наш сайт указанную ниже функцию. Как только мы закончим, лучше удалить эту функцию.
add_filter( 'upload_mimes', function( $mimes) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';
return $mimes;
} );
Узнайте, как добавить функции PHP здесь.
Теперь мы можем загрузить наши файлы шрифтов в медиа-библиотеку.
Теперь, когда наши файлы загружены, давайте возьмем URL-адрес файла для одного из них.
http://gp-test.local/wp-content/uploads/2019/02/open-sans-v15-latin-regular.woff2
Теперь давайте удалим имя файла и запомним URL-адрес для следующего шага.
http://gp-test.local/wp-content/uploads/2019/02/
Использование @ font-face
Хорошо, мы почти закончили! Теперь нам нужно ссылаться на наши шрифты в нашем CSS.
Вернемся на наш веб-сайт Google Fonts Helper, где мы загрузили файлы шрифтов, и вернемся к шагу 3.
Под всеми CSS вы увидите поле для префикса папки. Там мы собираемся добавить URL-адрес, который мы приняли к сведению выше.
Теперь над этим полем скопируйте весь предоставленный CSS и добавьте его на свой сайт.
Узнайте, как добавить CSS здесь.
Обратите внимание на font-family
поле в вашем CSS, нам понадобится это точное имя ниже. Вам не нужно сохранять то, что там по умолчанию – вы можете изменить это на все, что захотите.
Добавление в настройщик
Итак, наши шрифты загружены, и на них есть ссылки в нашем CSS. Теперь мы могли написать собственный CSS и ссылаться на наше новое семейство шрифтов.
Однако, если вы хотите использовать наши элементы управления типографикой в настройщике, нам нужно добавить шрифт в наш список шрифтов.
В нашем CSS мы отметили свое font-family
имя. В данном случае это Open Sans
.
Теперь мы можем использовать фильтр, чтобы добавить его в наш список настройщиков:
add_filter( 'generate_typography_default_fonts', function( $fonts ) {<br> $fonts[] = 'Open Sans';<br><br> return $fonts;<br>} );
Узнайте, как добавить PHP здесь.
Чтобы добавить несколько шрифтов, ваша функция будет выглядеть так:
add_filter( 'generate_typography_default_fonts', function( $fonts) {
$fonts[] = 'Open Sans';
$fonts[] = 'Parisienne';
return $fonts;
} );
Используя наш шрифт
Были сделаны! Теперь, когда вы войдете в настройки типографики в настройщике, вы найдете имя своего семейства шрифтов в разделе «Системные шрифты» раскрывающегося списка.
Последнее обновление 13 февраля 2019 г.
Источник записи: https://docs.generatepress.com