Categories
WordPress

Loading Multiple Google Fonts in WordPress: 2020 Revision

The proper way to load stylesheets or scripts in WordPress is to enqueue them in functions.php.

The process is explained very well in the WordPress Developer Area.

However, recently Google changed the format it uses for multiple font face or weight font downloads. This is causing only the first font family to be downloaded.

To fix this, make sure that your enqueue statement as contains the follows:

function mytheme_scripts_styles(){
// load theme stylesheet
wp_enqueue_style('mytheme_style', get_stylesheet_uri());

// load multiple google fonts
wp_enqueue_style('mytheme_google_fonts', 
'https://fonts.googleapis.com/css2?family=Goblin+One&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap', 

array(), null);

Specifically, you need to add two additional parameters right at the end of the enqueue statement. More detail on this issue.

Note: you do not need to do this if you are enqueuing only one google font. In a pinch, if this does not work, you could also just use two enqueue statements (one for each font-family), although that would have a small effect on site performance.