最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

wp enqueue style - Google Fonts not loading correctly

programmeradmin9浏览0评论

I have enqueued google fonts in the usual way in functions.php:

function travellers_field_guide_scripts()
{
  wp_enqueue_style('travellers-field-guide-style', get_stylesheet_uri(), array(), _S_VERSION);
  wp_enqueue_style('googlefont_css', ';family=Lato:wght@300;400;700;900&display=swap', false);
}
add_action('wp_enqueue_scripts', 'travellers_field_guide_scripts');

However, upon checking the <head> all I see is this

<link rel="stylesheet" id="googlefont_css-css" href=";amp;display=swap&amp;ver=5.4.2" media="all">

I've resorted to manually adding the link (exactly as I enqueued it) to the fonts in the header, and the fonts are downloaded as expected, but would be nice to know why Wordpress mangles the googlefont when trying to enqueue it. I checked my theme, there is no other reference to googlefont except to enqueue so I'm not doing anything to mangle it.

I have enqueued google fonts in the usual way in functions.php:

function travellers_field_guide_scripts()
{
  wp_enqueue_style('travellers-field-guide-style', get_stylesheet_uri(), array(), _S_VERSION);
  wp_enqueue_style('googlefont_css', 'https://fonts.googleapis/css2?family=Alata&family=Lato:wght@300;400;700;900&display=swap', false);
}
add_action('wp_enqueue_scripts', 'travellers_field_guide_scripts');

However, upon checking the <head> all I see is this

<link rel="stylesheet" id="googlefont_css-css" href="https://fonts.googleapis/css2?family=Lato%3Awght%40300%3B400%3B700%3B900&amp;display=swap&amp;ver=5.4.2" media="all">

I've resorted to manually adding the link (exactly as I enqueued it) to the fonts in the header, and the fonts are downloaded as expected, but would be nice to know why Wordpress mangles the googlefont when trying to enqueue it. I checked my theme, there is no other reference to googlefont except to enqueue so I'm not doing anything to mangle it.

Share Improve this question asked Jul 22, 2020 at 12:42 OctaviaLoOctaviaLo 1398 bronze badges 1
  • I had the same problem and found the solution here: stackoverflow/a/61547779/6663458 – Muhammad Mabrouk Commented Oct 27, 2021 at 15:04
Add a comment  | 

1 Answer 1

Reset to default 1

It looks like the URL is getting parsed somewhere and whatever does the parsing is probably internally only able to deal with one parameter for a particular name, so just keeps the second value for the family parameter.

As you have a valid usecase for having two parameters with the same name, you might want to file this as a bug.

If there are workarounds they could be hacky, so unfortunately adding to your header file might be the best solution for now, unless someone else can suggest another sensible way to add this to the header through hooks.

发布评论

评论列表(0)

  1. 暂无评论