Why can't I enqueue multiple Google Fonts in WordPress functions.php?

thenomadicmann :

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.

chriskirknielsen :

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.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=376245&siteId=1