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

Google шрифт

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

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,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.

Вам помог ответ?
Похожие вопросы
Удалил robots.txt, а новый не создается?
+9
Что делать, если украли сайт или контент?
+9
Почему не показывается количество просмотров?
+9
Как на главной странице и в архивах рандомно вывести карточки постов разных размеров?
+9
Как исправить галерею товара
+8
Как отключить защиту от перебора паролей?
+8
Как изменить почту, на которую приходят сообщения с формы обратной связи?
+7
Как изменить количество записей на главной и в рубриках
+7
Как вывести виджет анонсов записей с миниатюрами?
+7
Как во встроенном слайдере вместо записей выводить страницы?
+6
Как отделить категории от товаров
+6
C формы обратной связи не приходят письма
+6
Как изменить размер миниатюры?
+6
Как изменить цвет заголовка записи\страницы?
+5
Не работает Last-Modified
+5
Как вывести содержание в начале статьи?
+5
В чем разница нашего Clearfy Pro от Webcraftic (Creative Motion) Clearfy
+5
В robots.txt дублируется карта сайта (Sitemap)
+5
Как добавить ссылки на предыдущую/следующую запись на странице записи?
+5
Можно ли оплатить по безналичному расчету?
+5