How to combine Google Fonts imports

问题

I am using Wordpress with the Divi theme,

There is this code:

    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&#038;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&#038;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&#038;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&#038;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?

回答1:

Taken from https://developers.google.com/fonts/docs/getting_started?hl=en:

To request multiple font families, separate the names with a pipe character (|).

For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

回答2:

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" />

来源：https://stackoverflow.com/questions/32328798/how-to-combine-google-fonts-imports

标签

wordpress

httprequest

google-webfonts