Google Font Performance Boost (using font-display)

[wplit]

Describe the feature you'd like to see included in Oxygen.
Add option to set font-display to Google Fonts along side where we choose the font weights.

What are the use cases for this feature?
By utilising the display=swap, which is quite new to google fonts, it is reported that users will enjoy a performance boost.

Also Chrome's Lighthouse can sometimes flag it up asking for font-display to be changed.

Other options to control how the fonts are loaded..

The downside is that it can cause a split second of FOUC, where the fall back fonts are used before the font downloads, so it would need to be something we could set ourselves from inside the builder, not something added globally via the bloat eliminator settings. Users could then choose if it's worth the FOUC for a better speed time, and choose to only use on specific fonts that appear further down the page for eg.

[wplit]

Discussion on controlling font-display to typekit via webfontloader

[Nemesis19]

@wplit Has this issue been taken into consideration?

[adrien-robert]

+1

The topic on Facebook I created (initially asking if we could add font-display inside Elegant Custom Fonts plugin by Louis) https://www.facebook.com/groups/1626639680763454/permalink/2399755080118573/

[tottello]

Any time soon?

[stafi]

Very strange that this has not been corrected. It takes a small amount of time to change.

[nightgolfer]

Any news on this? Have a client that religiously tests his site in Lighthouse, and this topic keeps coming up.

[stafi]

For now just use

plugin called:

Fast Velocity Minify

It helped in my case.

[nightgolfer]

Thank you Stafi, I'll give that a try =)

For now just use

plugin called:

Fast Velocity Minify

It helped in my case.

[KnickelsTheEkidna]

Can this please be included in the next release, this can make or break a lot of CLS issues people may be experiencing.

[israeljernigan]

Yes, please. Would love to be able to append the new swap attribute for Google Fonts.

[gerogr]

+1

[RoninReilly]

+1

[sirhenryhu]

3-year time of the topic. Looking forward to this feature.

[rrdirnens]

+1

[falydev]

// Inject dispaly=swap to Google Fonts
function google_fonts_ds_inject_display_swap($html) {

    // Remove existing display swaps
    $html = str_replace("&display=swap", "", $html);
	
	// Add font-display=swap as a querty parameter to Google fonts
    $html = str_replace("googleapis.com/css?family", "googleapis.com/css?display=swap&family", $html);
    $html = str_replace("googleapis.com/css2?family", "googleapis.com/css2?display=swap&family", $html);

    // Fix for Web Font Loader
    $html = preg_replace("/(WebFontConfig\['google'\])(.+[\w])(.+};)/", '$1$2&display=swap$3', $html);

    return $html;
  
}

// Capture HTML
function google_fonts_ds_capture_html() {
    ob_start("google_fonts_ds_inject_display_swap");
}

add_action('init', 'google_fonts_ds_capture_html', 1);

[gugl]

Any progress there? Can we somehow vote on this issue?