How to Load Multiple Google Fonts in One URL Request

Loading google font is easy. If we visit Google Font page, for example Open Sans Font. we can see the instruction to add the font in our web page.

If we need to load multiple font weight (for example 400 (normal) and 700 (bold), we can use this pattern in the URL Font+Name:400,700. For example:

//fonts.googleapis.com/css?family=Open+Sans:400,700

So font name is separated using + sign. and we can add multiple font weight/style using : after font name and add available font weight/style in comma , separated string,

I remove the http: part of the URL when loading it, so it will be HTTPS compatible, and using the right protocol when loading the font.

If we use more than one font, we can simply load it in separate request, for example we use Open Sans and Ubuntu Font.

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Multiple Google Fonts in One URL

But of course we want to reduce the number of HTTP request. We can actually load multiple Google Fonts in one URL request like this:

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Ubuntu:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Pretty neat right? So all we need to do is to separate each font using | character.

Font Character Subsets

we can add character subsets in the URL as normal using extra parameter `&subset` with comma separated value, like this:

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Ubuntu:400,700,400italic,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Of course, character subset availability depends on the font you choose.

PHP Helper Function

In my theme library, I create a PHP function to easily build Google Font URL with multiple fonts and subsets.

/**
 * Google Font URL
 * Combine multiple google font in one URL
 * @link https://shellcreeper.com/?p=1476
 * @author David Chandra <[email protected]>
 */
function tamatebako_google_fonts_url( $fonts, $subsets = array() ){

    /* URL */
    $base_url    =  "//fonts.googleapis.com/css";
    $font_args   = array();
    $family      = array();

    /* Format Each Font Family in Array */
    foreach( $fonts as $font_name => $font_weight ){
        $font_name = str_replace( ' ', '+', $font_name );
        if( !empty( $font_weight ) ){
            if( is_array( $font_weight ) ){
                $font_weight = implode( ",", $font_weight );
            }
            $family[] = trim( $font_name . ':' . urlencode( trim( $font_weight ) ) );
        }
        else{
            $family[] = trim( $font_name );
        }
    }

    /* Only return URL if font family defined. */
    if( !empty( $family ) ){

        /* Make Font Family a String */
        $family = implode( "|", $family );

        /* Add font family in args */
        $font_args['family'] = $family;

        /* Add font subsets in args */
        if( !empty( $subsets ) ){

            /* format subsets to string */
            if( is_array( $subsets ) ){
                $subsets = implode( ',', $subsets );
            }

            $font_args['subset'] = urlencode( trim( $subsets ) );
        }

        return add_query_arg( $font_args, $base_url );
    }

    return '';
}

The function above will return string of Google Fonts URL, or empty if no value.

Usage

<?php tamatebako_google_fonts_url(
    array(
        'Open Sans' => '400,400italic,700,700italic',
        'Ubuntu'    => '400,400italic,700,700italic',
    ),
    'latin,latin-ext',
);?>

Notes:

You can use comma separated string in the font weight/style and subsets like example above or using array:

<?php tamatebako_google_fonts_url(
    array(
        'Open Sans' => array( '400', '400italic', '700', '700italic' ),
        'Ubuntu'    => array( '400', '400italic', '700', '700italic' ),
    ),
    array( 'latin', 'latin-ext' ),
);?>

You can use this function  in wp_enqueue_style() and in add_editor_style() function:

wp_enqueue_style() example:

/* Load font scripts */
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

/**
 * Enqueue ( Google ) Fonts
 */
function my_enqueue_scripts(){

    $google_fonts_url = tamatebako_google_fonts_url(
        array(
            'Open Sans' => '400,400italic,700,700italic',
            'Ubuntu'    => '400,400italic,700,700italic',
        ),
        'latin,latin-ext',
    );

    wp_enqueue_style( 'my-google-fonts', $google_fonts_url  );
}

add_editor_style() example:

$google_fonts_url = tamatebako_google_fonts_url(
    array(
        'Open Sans' => '400,400italic,700,700italic',
        'Ubuntu'    => '400,400italic,700,700italic',
    ),
    'latin,latin-ext',
);

add_editor_style( array(
    $google_fonts_url,
    'editor-style.css'
) );