Menu
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.
593
Properly Enqueuing Google Fonts in WordPress Another way to add Google fonts to your WordPress site is by enqueuing the font in your theme's functions. php file or a site specific plugin. add_action( 'wp_enqueue_scripts' , 'wpb_add_google_fonts' ); Don't forget to replace the font link with your own.
Then, add the family= URL parameter, with one or more font family names and styles. Note: Replace any spaces in the font family name with plus signs ( + ). To request multiple font families, separate the names with a pipe character ( | ). Requesting multiple fonts allows you to use all of those fonts in your page.
Open https://fonts.google.com/, select two font families by clicking a plus symbol "+" next to their title. Open the block titled "Family Selected" at the bottom of the screen. Copy the CSS link that contains both font families. In the Google Fonts tab, paste the link into the CSS input field.
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.
82
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
