Recently, we bought the Studiopress Genesis Framework. And to tell you, it’s a great framework to create your own custom theme. We created a custom child theme in just two days using the sample theme from the Genesis framework.
While creating our own theme, there was a good learning curve on how the genesis framework works and how to customize it as per our requirements. Most of the answers were available in their knowledge base, but for some, we had to Google, and adding multiple Google fonts is one of them.
Google has changed its JavaScript versions to embed fonts on web pages. Let’s take a quick look at both versions:
Previous Versions:
https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap
https://fonts.googleapis.com/css?family=Open+Sans&family=Roboto&display=swap
Latest CSS2 Version:
https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap
Observe the differences in each version. Make sure to use the latest version from the Google Fonts library.
While working on our own new child theme using the Genesis Framework by StudioPress, we started facing enqueue problems with the latest CSS2 version Google Fonts.
I couldn’t find the right answer in any blog posts, forums, or websites, so thought of sharing what I did to fix the broken URLs with the same query var name used multiple times. In our multiple Google fonts cases, it is a “family” variable used in the URLs twice for multiple fonts, and that was causing the problem while rendering.
However, multiple same var query is not actually a Genesis framework issue, it is a known WordPress core issue. Luckily, the Studiopress Genesis team has created a patch to resolve it.
How to enqueue multiple Google Fonts in your Genesis child theme?
Here are the steps you need to follow to enqueue multiple Google fonts and resolve multiple same variables in the URLs issue:
Step 1: Select the required fonts from the Google Fonts repository.
Step 2: Click on the Selected families Embedded tab, choose <link> and pick your code that looks like <link href=”https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap” rel=”stylesheet”>
Step 3: In your Genesis sample theme or child theme, either you use functions.php or appearance.php, make sure to update ‘fonts-url’ => ‘googlefonturl’ like
‘fonts-url’ => ‘https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap’
Step 4: To fix this, make sure you key in “null” in place of the Genesis Child Theme Version in wp_enqueue_style script as shown below:
function genesis_sample_enqueue_scripts_styles() {
$appearance = genesis_get_config( 'appearance' );
wp_enqueue_style(
genesis_get_theme_handle() . '-fonts',
$appearance['fonts-url'],
[],
null
);
wp_enqueue_style( 'dashicons' );
}
Step 5: Don’t forget to change the font family in the style.css file in your theme as:
font-family: ‘Open Sans’, sans-serif;
font-family: ‘Roboto’, sans-serif;
I hope you find this useful.
Feel free to leave your comment below if you face any issues while implementing the discussed solution, I would be happy to help.
StudioPress – Sites that rank higher
StudioPress provides themes, content sections, full-page layouts, custom block-builders, and Genesis framework.