Question posted in
The full documentation can be found here.

Divi theme – 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?

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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" />
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search