How to combine Google Fonts imports

1 Views

I am using WordPress with the Divi theme,

There is this code:

Read More
    function et_divi_fonts_url() {
    $fonts_url = '';

    /* Translators: If there are characters in your language that are not
     * supported by Open Sans, translate this to 'off'. Do not translate
     * into your own language.
     */
    $open_sans = _x( 'on', 'Open Sans font: on or off', 'Divi' );

    if ( 'off' !== $open_sans ) {
        $font_families = array();

        if ( 'off' !== $open_sans )
            $font_families[] = 'Open+Sans:300italic,400italic,700italic,800italic,400,300,700,800';

        $protocol = is_ssl() ? 'https' : 'http';
        $query_args = array(
            'family' => implode( '%7C', $font_families ),
            'subset' => 'latin,latin-ext',
        );
        $fonts_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );
    }

    return $fonts_url;
}

That generates this output: 

<link rel='stylesheet' id='tp-open-sans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700%2C800&ver=4.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='tp-raleway-css'  href='http://fonts.googleapis.com/css?family=Raleway%3A100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&ver=4.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='tp-droid-serif-css'  href='http://fonts.googleapis.com/css?family=Droid+Serif%3A400%2C700&ver=4.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='et_monarch-open-sans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' type='text/css' media='all' />
<link rel='stylesheet' id='divi-fonts-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,700,800&subset=latin,latin-ext' type='text/css' media='all' />

I am wondering if there a psemi simple way to combine all those resources in to a single request?

Post Views: 1

Related posts

3 comments

  2. I used
    https://developers.google.com/fonts/docs/css2

    Example

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:wght@300;400;600;700;800&family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">

    display=swap

    https://developers.google.com/web/updates/2016/02/font-display

    swap gives the font face a zero second block period and an infinite
    swap period. This means the browser draws text immediately with a
    fallback if the font face isn’t loaded, but swaps the font face in as
    soon as it loads. Similar to block, this value should only be used
    when rendering text in a particular font is important for the page,
    but rendering in any font will still get a correct message across.
    Logo text is a good candidate for swap since displaying a company’s
    name using a reasonable fallback will get the message across but you’d
    eventually use the official typeface.

  3. One solution is this Google Font Optimization tool.

    You can insert multiple Fonts URLs in this tool and get a single clean URL in return.

    Another solution is Easy Fonts, but it combines all the fonts in one URL instead of allowing you to choose which fonts to combine:

    <link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

Comments are closed.