Как добавить или изменить шрифт в теме

Google шрифт

В наших шаблонах используются шрифты от Google. Чтобы добавить шрифт, например, Roboto Mono, зайдите и выберите все нужные начертания. Справа Google предложит код для вставки, например такой:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,[email protected],400;0,500;1,400&display=swap" rel="stylesheet">

Отсюда нам нужно будет название Roboto+Mono и толщина шрифта 400, 500. Если нужен наклонный шрифт — добавьте букву i к толщине шрифта, например 400i.

Установите и активируйте пустой плагин ProFunctions и в файл profunctions.php добавьте код:

// добавление шрифта
add_filter( 'wpshop_fonts_list', function ( $fonts ) {
    $fonts['roboto_mono'] = [       // название без пробелов и в нижнем регистре 
        'name'   => 'Roboto Mono',  // название, которое будет в списке
        'url'    => 'Roboto+Mono',  // название шрифта в Google
        'weight' => '400,400i,500', // толщина шрифта через запятую без пробелов
    ];

    return $fonts;
} );

Если вам необходимо изменить толщину у существующего шрифта, найдите нужный шрифт в /vendor/wpshop/core/src/Fonts.php и добавьте по аналогии выше, установив нужную толщину в weight.

// изменение толщины у существующего шрифта
add_filter( 'wpshop_fonts_list', function ( $fonts ) {
    $fonts['montserrat'] = [
        'name'   => 'Montserrat',
        'url'    => 'Montserrat',
        'weight' => '100,400,400i,500,700', // добавьте нужную толщину здесь
    ];

    return $fonts;
} );

Данный шрифт появится в списке шрифтов в Внешний вид > Настроить > Типографика.

Свой шрифт

Можно добавить свой шрифт, используя свойство @font-face. Установите и активируйте дочернюю тему, загрузите в директорию дочерней темы ваши шрифты, например в папку fonts. Для веба обычно добавляют файлы .woff, .woff2, .ttf, .eot, добавьте те, которые у вас есть.

В style.css в дочерней теме добавьте стили, заменив название шрифта и файлов на свое.

@font-face {
  font-family: 'Geometria'; /* Название вашего шрифта */
  src: url('./fonts/geometria.eot');
  src: url('./fonts/geometria.eot?#iefix') format('embedded-opentype'),
       url('./fonts/geometria.woff2') format('woff2'),
       url('./fonts/geometria.woff') format('woff'),
       url('./fonts/geometria.ttf')  format('truetype');
  font-display: swap;
}

Оставьте только те строчки, файлы которых у вас есть. Если у вас есть только .woff и .ttf стили будут выглядеть так:

@font-face {
  font-family: 'Geometria'; /* Название вашего шрифта */
  src: url('./fonts/geometria.woff') format('woff'),
       url('./fonts/geometria.ttf')  format('truetype');
  font-display: swap;
}

Ниже можно добавить стили для применения нового шрифта к элементам, например для всего сайта к body:

body {
  font-family: 'Geometria', sans-serif;
}

Не забудьте везде изменить название шрифта на свое.

В шаблоне выберите шрифт Arial в разделе Внешний вид > Настроить > Типографика, чтобы не подключать шрифты от Google.

Если вам нужны будут дополнительные возможности почитайте подробнее про @font-face.

Вам помог ответ?
Похожие вопросы
Как убрать поле "Email" из формы комментирования?
+92
Ваши темы поддерживают английский язык?
+8
Почему в Гугл.Вебмастере выдается ошибка "Страница не оптимизирована для мобильных устройств"?
+8
Что будет, если Ваш сервер лицензий/Ваш сайт закроется? Перестанут ли работать темы?
+7
Что означает ошибка publisher в микроразметке?
+6
Как убрать поле "Сайт" из формы комментирования?
+5
Как сделать фиксированный (плавающий) виджет?
+5
Как изменить количество записей на главной и в рубриках блога
+4
Текст без переносов и/или выходит за границы
+4
Как на главной странице и в архивах рандомно вывести карточки постов разных размеров?
+4
Как исключить из содержания ненужные заголовки?
+3
Нужно ли покупать Clearfy, если у меня Ваша тема?
+3
Можно ли перенести лицензию на другой домен?
+3
Можно ли взять лицензию на один домен, а потом докупить неограниченную?
+2
Каким способом лучше убрать слово «category» из URL рубрики?
+2
Можно ли на Ваших шаблонах создать мультиязычный сайт?
+2
Почему не показывается количество просмотров?
+2
Как отключить защиту от перебора паролей?
+2
Как увеличить логотип?
+2
Как поменять форму "Задать вопрос"
+2