TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

GeneratePress – Как добавить локальные шрифты в лучшую тему для WordPress

908

Иногда вам может понадобиться разместить шрифт локально, вместо использования такой службы, как Google Fonts. В этой статье вы узнаете, как это сделать.

В этой статье мы будем использовать шрифты Google. Однако этот процесс будет работать для любого файла шрифта, который у вас может быть.

Скачивание нашего шрифта

Итак, первый шаг – загрузить шрифт, который мы хотим использовать. Для Google Fonts этот инструмент невероятно полезен.

В левом верхнем углу найдите шрифт, который хотите загрузить.

После того, как вы нажмете на свой шрифт, вы попадете на страницу, где сможете выбрать варианты и загрузить файлы.

Выбирая варианты, обязательно отметьте только те, которые вам нужны. Чем больше вы проверяете, тем тяжелее будет ваша страница.

GeneratePress Как добавить локальные шрифты в лучшую тему для WordPress

Следующим шагом на странице является копирование нашего CSS, но мы пока пропустим это и перейдем к шагу 4, который загружает файлы.

GeneratePress Как добавить локальные шрифты в лучшую тему для WordPress

На ваш компьютер будет загружен файл .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 здесь.

Теперь мы можем загрузить наши файлы шрифтов в медиа-библиотеку.

GeneratePress Как добавить локальные шрифты в лучшую тему для WordPress

Теперь, когда наши файлы загружены, давайте возьмем URL-адрес файла для одного из них.

GeneratePress Как добавить локальные шрифты в лучшую тему для WordPress

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-адрес, который мы приняли к сведению выше.

GeneratePress Как добавить локальные шрифты в лучшую тему для WordPress

Теперь над этим полем скопируйте весь предоставленный 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; } );

Используя наш шрифт

Были сделаны! Теперь, когда вы войдете в настройки типографики в настройщике, вы найдете имя своего семейства шрифтов в разделе «Системные шрифты» раскрывающегося списка.

GeneratePress Как добавить локальные шрифты в лучшую тему для WordPress

Последнее обновление 13 февраля 2019 г.

Источник записи: https://docs.generatepress.com

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