25

I'm using wp_enqueue_style to enqueue this Google Font file. Here is my code:

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,400&family=Neuton:ital,wght@0,300;0,400;0,700;1,400&display=swap', [] );

This is in my functions.php file.

However, when I view source on my loaded page, the URL for that font file is cut down to: https://fonts.googleapis.com/css2?family=Neuton%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C700%3B1%2C400&display=swap&ver=5.3.2

As you can see, the first family param has been removed after being outputted through wp_enqueue_style. Is there a way to fix this without doing anything hacky? I think there may be an outdated way to build the URL for both font families to come through, but I'd rather be able to use what Google now provides. My original URL inside wp_enqueue_style is the URL generated by Google Fonts for me to embed.

2 Answers 2

56

This actually has to do with PHP and the way it parses query parameters.

https://www.php.net/manual/en/function.parse-str.php

In any case, the current workaround is to pass "null" to the version parameter to have WordPress not add a "ver" to the URL.

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,400&family=Neuton:ital,wght@0,300;0,400;0,700;1,400&display=swap', [], null );

That ending "null" will eliminate the problem, since WordPress won't try to add any additional parameters to the URL, thus not running it through PHP's query string handling functions.

This may be addressed more directly in a future WordPress update. However, having no version on these external URLs makes sense regardless.

2
  • 2
    This should be the right answer, worked like a charm! thanks
    – Alyas
    Aug 8, 2020 at 12:53
  • 1
    Thanks, I've marked this as the correct answer since that worked for me! Aug 17, 2020 at 20:24
10

The same query parameter is defined twice (family) so WordPress removes one. This is a normal thing in a typical context: if there is a repeated query parameter, only the last one is used. WordPress makes use of this "rule" when enqueuing the URL.

I can't tell you why Google Fonts changed the syntax from the | separator (like so: https://fonts.googleapis.com/css?family=Montserrat|Neuton&display=swap) to this repeated family parameter, but it looks like it might be because of the complexity like you see in your URL. One thing is for sure: this is going to cause some trouble like you're running into now. Either WordPress will need to adjust for this, or Google Fonts will have to update/revert their URL syntax. This probably won't happen today.

In this case, you're better off making the change yourself for now, by using the Classic Site (in the Google Fonts navbar) to build out your font URL instead. I know you won't get as many options (looks like you're trying to use variable fonts, which are fantastic!), so it is a bit disappointing.

You can, alternatively, download the files and self-host these fonts. It's a performance boost in many cases, too.

2
  • 1
    This was my suspicion as well but figured I'd check SO. I sent this post to them as feedback on their Google Fonts site so hopefully it ends up on their radar. I'll send it to WordPress as well. Mar 31, 2020 at 15:58
  • Good call on flagging this to them, hopefully they will be able to address this. Mar 31, 2020 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.