Объединение запросов Google Fonts не работает
Я работаю над сайтом, на котором мне нужно загрузить два шрифта Google. В попытке сделать все как можно эффективнее, я хотел бы объединить загрузку обоих шрифтов в один запрос. У меня никогда не было проблем с этим раньше. Google генерирует путь, и я всегда мог просто скопировать его в свой файл functions.php и зарегистрировать его там. Однако сделать то же самое на этот раз не получится. Синтаксис строки теперь также выглядит немного иначе. Раньше два шрифта в пути, который генерировал Google, разделяла вертикальная черта (|), но теперь ее нет. Если я разделю каждый шрифт на отдельный запрос, все будет работать нормально.
Первый приведенный ниже фрагмент кода — это то, как я пытаюсь зарегистрировать свои шрифты, используя ссылку, предоставленную Google, с обоими шрифтами, объединенными в один запрос.
function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700' );
wp_enqueue_style( 'my-google-fonts' ); }
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
Я также пытался поставить '|' между 'family' и 'Open' в этой строке, поскольку я знаю, как раньше разделялись два шрифта в одном запросе. Там тоже не повезло.
Следующий фрагмент — единственный способ заставить шрифты загружаться правильно, то есть разделить их на несколько запросов.
function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700' );
wp_register_style( 'my-google-fonts-2', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700' );
wp_enqueue_style( 'my-google-fonts' );
wp_enqueue_style( 'my-google-fonts-2' );
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
Что-то не так с комбинированной ссылкой, которую мне предоставляет Google? Если да, то что нужно изменить? Если нет, то что я делаю неправильно? Кто-нибудь еще сталкивался с этой проблемой раньше? Любая помощь будет очень высоко ценится.
Ответы 2
Обновлено:
После последнего обновления Google Font вам необходимо использовать следующую строку:
<link rel = "preconnect" href = "https://fonts.gstatic.com">
После выбора необходимых шрифтов в Google Fonts, вот фрагмент кода для встраивания, который они нам дают:
<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap" rel = "stylesheet">
В настоящее время ВЫ загружаете свой шрифт, используя URL-адрес Google Fonts по умолчанию из панели URL-адресов. Оба не одинаковы (см. правильное объявление ниже).
Right = https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap.Wrong = https://fonts.google.com/specimen/Maven+Pro?query=Maven&sidebar.open=true&selection.family=Maven+Pro:wght@400;700|Open+Sans:wght@300;700 .
Соответствующий фрагмент кода появится в правом столбце после того, как вы выберете шрифт на веб-сайте шрифтов Google.
Лучше всего загружать scripts, stylesheets и fonts из файла function.php.
Конечно, мы должны адаптировать фрагмент кода, предоставленный Google Font, к нашей среде Wordpress.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*/
wp_register_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
wp_enqueue_style( 'google_fonts' );
};
}; ?>
При использовании CDN вы хотите быть уверены, что источник доступен. Мы можем использовать @fopen();, чтобы «проверить» наш URL-адрес и убедиться, что наш CDN работает, если нет, мы вернем резервный файл, размещенный на сервере нашего веб-сайта.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*
* Check if CDN's url is valid, if not return fallback
*/
$test_google_fonts = @fopen( 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap', 'r' );
if ( $test_google_fonts !== false ) {
wp_register_style( 'google_fonts', '//fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
} else {
wp_register_style( 'google_fonts', get_stylesheet_uri() . '/assets/font/_my_awesome_font_fallback_' );
};
wp_enqueue_style( 'google_fonts' );
};
}; ?>
Кстати, если вы собираетесь сразу зарегистрировать и поставить скрипт в очередь, вам не нужно делать и то, и другое, вы можете сразу перейти к части постановки в очередь.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*/
wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
};
}; ?>
Большое спасибо за ваш ответ. Я не знал, что не нужно сначала регистрировать скрипт, это очень хорошо знать. Однако я попробовал код, который вы предоставили, и у меня все еще есть та же проблема. Поправьте меня, если я ошибаюсь, но похоже, что ссылка, которую вы говорите, является правильной ссылкой, и та, что у меня есть в моем примере, - это та же ссылка, за исключением «display = swap» в конце, который Я думал, что не требуется. Я пропустил что-то еще? Может быть, есть другая проблема, вызывающая это? Кроме того, я заметил, что когда я загружаю комбинированную ссылку в <head>, шрифты загружаются просто отлично.
Вчера работал с моей стороны на моем локальном сервере! display=swap НЕ единственная разница, присмотритесь. <link rel = "preconnect" href = "https://fonts.gstatic.com"> эта строка также предоставлена Google Fonts, так что она, вероятно, требуется, может быть, это ваш header.php.
Кроме того, если вы используете такой фреймворк, как Bootstrap, может возникнуть конфликт. Используйте объявление !important css, чтобы убедиться, что ваш шрифт применяется к вашему селектору.
Я видел предварительное подключение, просто не думал, что оно требуется, так как его никогда не было раньше. Но я попробую. Я тоже попробую !важно. Спасибо за помощь!
Предварительное соединение <link> казалось проблемой. Добавил в шапку и вдруг заработало. Еще раз спасибо!
Для всех, кто сталкивается с этой проблемой, проблема заключалась в том, что я не добавил этот фрагмент в <head> внутри header.php.
<link rel = "preconnect" href = "https://fonts.gstatic.com">
Раньше этого не требовалось, и я точно не знаю, почему это нужно сейчас, но это решило мою проблему. Спасибо @amarinediary за то, что указал мне на это.
Ваш первый пример кажется мне хорошим. Вроде все есть? fonts.googleapis.com/… Ознакомьтесь с документацией здесь Developers.google.com/fonts/docs/css2