Why can't I queue multiple Google Fonts in WordPress functions.php with wp_enqueue_style?

To call scripts in WP you use wp_enqueue_style and you can do the same when calling a Google Font file externally. To the string I normally add a defined value (THEME_VERSION) which is then added 'ver' to the string. WordPress then creates a version number for the stylesheet, which causes the version number to be added to the URL for cache-busting purposes. Thus it is a unique file version identifier which tells the browser that a new version of the file is available. I sometimes use the theme version number as an indicator in the themes I build. You can also set version to false, and it will automatically add a version number corresponding to the currently installed WordPress version. If it is set to null, no version is added.

	wp_enqueue_style('google_font', 'https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:[email protected];700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&display=swap',[], THEME_VERSION); // theme vers.

	wp_enqueue_style('google_font', 'https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:[email protected];700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&display=swap',[], false); // WP version

I noticed that there were errors in the call when I included multiple fonts in the same call. The error was often that it only fetched one font. The reason turned out to have something to do with how WordPress Core parses query parameters on and in this case the "?ver" that was added to the string. Because when multiple query parameters are added, one is removed. However, it can be done with one. So it is only when there are multiple query parameters (i.e. ? & &) that it fails and prefers to add 'ver' rather than the first query parameter, causing the first font not to be retrieved.

A workaround in the current solution is therefore to pass "null" to the version parameter to make WordPress not add a "ver" to the URL.

wp_enqueue_style('google_font', 'https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:[email protected];700&family=Roboto:ital,[email protected],400;0,700;1,400;1,700&display=swap',[], null); // Wordaround

In the old days, Google Fonts scripts looked different and each font was separated by a "|", which meant there was only one query parameter, which didn't immediately present the same challenges (e.g.: https://fonts.googleapis.com/css?family=Fuzzy+Bubbles|Roboto&display=swap)

Alternatively, you can download the files yourself and host the fonts on your own site or via a CDN. This is also a performance boost in many cases. Google Fonts is open source But check the licenses for safety's sake before downloading 🙂