Ensure text remains visible during webfont load about templates HOT 7 CLOSED

Right now this is a local solution to it, but would be better to have it in the worker and streamer: https://metabox.io/load-google-fonts-wordpress/

Working good as a php snippet

add_action( 'wp_head', 'themeprefix_load_fonts' ); 
function themeprefix_load_fonts() { 
    ?> 
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com --> 
<link rel="dns-prefetch" href="https://fonts.gstatic.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"> 
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous"> 
<script type="text/javascript"> 
!function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage); 
</script>
<!-- End of code snippet for Google Fonts -->
    <?php
}

from templates.

@pmeenan Even preload critical font not only google fonts, all fonts that are used above the fold. Custom fonts, icons etc? just wild card all .woff*?

from templates.

@alriksson Google has come up with a new query that supports injecting font-display: swap to the @font-face. So I guess it's better to do it from WordPress itself. See https://wpspeedmatters.com/fix-foit-font-in-wordpress/

from templates.

@gijo-varghese Googlefonts the workers streamer already take care of the issue is icon font packs. And to alter parent code which will be flushed sooner or later, it would be better with a php routing or adding something in the workers for all types of woff's.

from templates.

@pmeenan could we sort font-display: Swap to the google fonts optimization?

@gijo-varghese if doing manually in wordpress I would like to inject it with a php script to not alter theme or plugin files which are where google fonts come from. Any solution? Tried your plugin with elementor but does not solve the issue.

from templates.

@alriksson my plugin only fix Googe Fonts (asynchronously injected won't work). I may create a plugin that will fix both soon

from templates.

Closing this issue because the initial question was addressed. Also the templates have moved over to the worker-sdk monorepo: https://github.com/cloudflare/workers-sdk/tree/main/templates.

if you're still experiencing issues feel free to open an issue there.

from templates.