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

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

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

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

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

Вам помог ответ?