Combining Google Fonts requests not working

user_14260900 0
Viewed 700

I'm working on a site on which I need to load two Google fonts. In an attempt to keep things moving as efficiently as possible, I would like to combine the loading of both fonts into one request. I've never had a problem with this before. Google generates the path, and I have always just been able to copy it into my functions.php file and register it there. However, doing the same thing this time is not working. The syntax of the string looks a bit different now as well. There used to be a pipe character (|) separating the two fonts in the path that Google would generate, but now there is not. If I split each font into it's own request, everything works fine.

The first snippet provided below is how I'm attempting to register my fonts using the link Google provided with both fonts combined into one request.

function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700' );
wp_enqueue_style( 'my-google-fonts' ); }
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

I've also tried placing a '|' between 'family' and 'Open' in that string, as I know that's how two fonts in one request used to be separated. No luck there either.

The next snippet is the only way I've gotten the fonts to load properly, which is by splitting them up into multiple requests.

function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700' );
wp_register_style( 'my-google-fonts-2', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700' );
wp_enqueue_style( 'my-google-fonts' );
wp_enqueue_style( 'my-google-fonts-2' );
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

Is there something wrong with the combined link Google is providing me? If so, what needs to be changed? If not, what am I doing wrong? Has anyone else run into this problem before? Any help would be very much appreciated.

google-webfonts wordpress fonts php
2 Answers

EDIT:

Since the last Google Font update, you're required to use the following line:

<link rel="preconnect" href="https://fonts.gstatic.com">

Upon selecting the required fonts on Google Fonts, here is the embed snippet they're giving us:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap" rel="stylesheet">

YOU are currently loading your font using the default Google Fonts url from the url bar. Both are not the same (See right ad wrong bellow).

Right = https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap.
Wrong = https://fonts.google.com/specimen/Maven+Pro?query=Maven&sidebar.open=true&selection.family=Maven+Pro:wght@400;700|Open+Sans:wght@300;700.

The proper code snippet will appear on the right side column once you've selected a font on the Google font website.

Loading scripts, stylesheets and fonts from the function.php file is the best practice.

Of course we have to adapt the code snippet given by Google Font to our Wordpress environment.

<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue google fonts
    */
    wp_register_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
    wp_enqueue_style( 'google_fonts' );
  };
}; ?>

When using CDNs, you want to be sure that the source is available. We can Use @fopen(); to "test" our url and make sure our CDN is working, if not we return a fallback file hosted on our website server.

<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue google fonts
    *
    * Check if CDN's url is valid, if not return fallback
    */
    $test_google_fonts = @fopen( 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap', 'r' );
    if ( $test_google_fonts !== false ) {
      wp_register_style( 'google_fonts', '//fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
    } else {
      wp_register_style( 'google_fonts', get_stylesheet_uri() . '/assets/font/_my_awesome_font_fallback_' );
    };
    wp_enqueue_style( 'google_fonts' );
  };
}; ?>

On a side note, if you intend to register and enqueue a script straight away, you don't need to do both, you can jump straight to the enqueuing part.

<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

  /**
  * Register then enqueue google fonts
  */
  wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
  };
}; ?>
user_36456500

For anybody else that comes across this issue, the problem was that I had not added this snippet to the <head> within header.php.

<link rel="preconnect" href="https://fonts.gstatic.com">

This was not required before, and I'm not sure exactly why it is now, but that solved my problem. All thanks to @amarinediary for pointing it out to me.

user_142609000
Related