Как подключить несколько шрифтов Google Fonts к WordPress?

Ссылка скопирована
CSS Google Google Fonts Swap WordPress Шрифты
1 ответ

Приветствую, собственно дело в следующем, при подключении шрифтов

function google_fonts() { 	wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:300,500,700&display=swap', array(), null ); 	wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Jura:300,500,700&display=swap', array(), null ); } add_action( 'wp_enqueue_scripts', 'google_fonts' );

function google_fonts() { wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:300,500,700&display=swap', array(), null ); wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Jura:300,500,700&display=swap', array(), null ); } add_action( 'wp_enqueue_scripts', 'google_fonts' );

Отображается только один - первый.

Как сделать так чтобы грузились оба шрифта?

Дополнительно:

Как подключить несколько шрифтов Google Fonts к WordPress?

Абсолютно также как и к не вордпрессу.
Шрифты подключаются одной ссылкой.
Идете на гугло фонтс, выбираете и плюсуете оба шрифта.
Получаете одну ссылку.

Как подключить несколько шрифтов Google Fonts к WordPress?

Хэндлеры должны быть разные (уникальные), а у Вас 'google-fonts' для обоих.

  • Мда, затупил). Спасибо!
Нужно решить такую задачу?

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

Заказать помощь
Лучший ответ
1
Backend-редакция Ответ

У Вас оба шрифта подключаются с одним и тем же handle: google-fonts. В WordPress handle должен быть уникальным. Если два раза вызвать wp_enqueue_style() с одним именем, второй вызов не будет нормально добавлен как отдельная таблица стилей.

Самый правильный вариант — подключить оба Google Fonts одной ссылкой. В Google Fonts выбираете оба семейства и получаете общий URL. Например:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'theme-google-fonts',
        'https://fonts.googleapis.com/css2?family=Jura:wght@300;500;700&family=Montserrat:wght@300;500;700&display=swap',
        [],
        null
    );
});

add_action('wp_enqueue_scripts', function () { wp_enqueue_style( 'theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Jura:wght@300;500;700&family=Montserrat:wght@300;500;700&display=swap', [], null ); });

Обратите внимание: в новом формате Google Fonts используется css2, а веса указываются через wght@. Также параметр display=swap должен быть отделён через &, а не просто дописан в строку без разделителя.

Если хотите подключать двумя ссылками, handles должны быть разными:

wp_enqueue_style(
    'google-fonts-montserrat',
    'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap',
    [],
    null
);
 
wp_enqueue_style(
    'google-fonts-jura',
    'https://fonts.googleapis.com/css2?family=Jura:wght@300;500;700&display=swap',
    [],
    null
);

wp_enqueue_style( 'google-fonts-montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap', [], null ); wp_enqueue_style( 'google-fonts-jura', 'https://fonts.googleapis.com/css2?family=Jura:wght@300;500;700&display=swap', [], null );

Но две ссылки хуже для производительности, чем одна объединённая. После подключения используйте шрифты в CSS:

body {
  font-family: 'Montserrat', Arial, sans-serif;
}
 
.accent-title {
  font-family: 'Jura', Arial, sans-serif;
}

body { font-family: 'Montserrat', Arial, sans-serif; } .accent-title { font-family: 'Jura', Arial, sans-serif; }

И ещё: если сайт ориентирован на скорость и российскую аудиторию, подумайте о локальном хранении шрифтов. Google Fonts может добавлять внешние запросы и влиять на скорость/стабильность загрузки. Но с точки зрения Вашей ошибки причина простая: одинаковый handle и некорректно собранные URL.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Искусственный интеллект Что делать, если OpenRouter ограничивает доступ к моделям? 1 ответ