Font Display optimization

[martijn19811]

• Add an option to append font-display: swap; to all @font-face rules before caching the CSS file.
• Add an option to add the query param to google fonts too. For example, https://fonts.googleapis.com/css?family=Lobster&display=swap
• Even though swap is advised for best optimisation, providing a select dropdown with all possible options on the settings page. Options: auto, block, swap, fallback, optional

This would hugely benefit all Google Pagespeed scores: https://developers.google.com/web/updates/2016/02/font-display

[maxicus]

Thanks for idea. That makes sense.

[andcha]

These are some of the must have features to make this "one plugin does it all".

Meanwhile for point 2, I am using the following snippet in child theme's functions.php

//Add display=swap to every font call to google
function add_swap_to_fonts_from_google_etc( $html ) {
if ( TRUE == strpos( $html, 'https://fonts.googleapis.com/css?family' ) ){
return str_replace( 'https://fonts.googleapis.com/css?', 'https://fonts.googleapis.com/css?display=swap&', $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_swap_to_fonts_from_google_etc', 10 );

[martijn19811]

Thanks @maxicus! I have to clarify a few things though:

font-display: swap would be great for normal fonts. A huge improvement, no doubt about it. But icon fonts, like FontAwesome or GlyphIcons Halflings, would benefit more from a setting like font-display: block, since there's no fallback font for them anyway. So that distinction would be needed...

[mtachaudhary]

These are some of the must have features to make this "one plugin does it all".

Meanwhile for point 2, I am using the following snippet in child theme's functions.php

//Add display=swap to every font call to google
function add_swap_to_fonts_from_google_etc( $html ) {
if ( TRUE == strpos( $html, 'https://fonts.googleapis.com/css?family' ) ){
return str_replace( 'https://fonts.googleapis.com/css?', 'https://fonts.googleapis.com/css?display=swap&', $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_swap_to_fonts_from_google_etc', 10 );

@andcha Thanks, It's really helpful

[iwanwilaga]

@mtachaudhary Hello, good snippet! However for me it doesn't replace all related '//fonts.googleapis.com/css?'-s. Those which are left unchanged are probably scripts not properly enqueued by some plugin or the theme?

an example .css that is replaced properly by your snippet: <link rel="stylesheet" id="xts-google-fonts-css" href="https://fonts.googleapis.com/css?display=swap&amp;family=Lato%3A400%2C700%7CPoppins%3A400%2C600%2C500&amp;ver=6.1.4" type="text/css" media="all">

and another is untouched: <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

Sure they are different, the first example, has proper id attribute (handler id, populated by the enqueue function i guess?). The latter one lacks this, thus not under the scope of 'style_loader_tag' hook. Am i right?

Need confirmation and/or possible idea, for fixing even the unchanged "rebel" scripts :). Is there some other hook or solution that has broader scope, so can cover & filter really Everything that gets printed to the final rendered html document?

Thanks! Best,

UPDATE >>>: this Swap Google Fonts Display plugin probably helps.

[maxicus]

@iwanwilaga yes, above snippet will only change those fonts inserted by a clean wp way. and btw only starting with https:// whats not ideal. what means it won't work well in our real world of mess :)

but it's pretty good as an example

[mykkal]

Has this feature been released yet? Many competitors have this option.