Ensure text remains visible during webfont load

[wpsumo]

Font display: https://developers.google.com/web/updates/2016/02/font-display

Would be nice to include this function as service worker in the fast google fonts script streamer? https://medium.com/@pierluc/supercharge-google-fonts-with-cloudflare-and-service-workers-25c37462fb6a

Repo: https://github.com/Zertz/font-workers

Possibility to also optimize fontawesome v4.7 and v5 to extend the workers to also optimize local font by adding such functions to the worker script.

[wpsumo]

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
}

[wpsumo]

@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*?

[gijo-varghese]

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

[wpsumo]

@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.

[wpsumo]

@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.

[gijo-varghese]

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

[lauragift21]

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.