Git Product home page Git Product logo

Comments (7)

wpsumo avatar wpsumo commented on June 17, 2024

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.

wpsumo avatar wpsumo commented on June 17, 2024

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

gijo-varghese avatar gijo-varghese commented on June 17, 2024

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

wpsumo avatar wpsumo commented on June 17, 2024

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

wpsumo avatar wpsumo commented on June 17, 2024

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

gijo-varghese avatar gijo-varghese commented on June 17, 2024

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

from templates.

lauragift21 avatar lauragift21 commented on June 17, 2024

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.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.