Comments (7)
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.
Related Issues (20)
- In worker-rust template update `worker` dependency to 0.0.11 HOT 1
- WHIP and WHEP templates are not properly working in Firefox
- worker-rust build command does not work HOT 2
- worker-mysql build fail
- worker-mysql does not work well MySQL-compatible database HOT 1
- Typo in "about" section
- Error: EXDEV: cross-device link not permitted HOT 2
- Ship a prettier/editorconfig with every template
- Uncaught ReferenceError: jQuery is not defined HOT 12
- POST /wp-admin/admin-ajax.php 403 (Forbidden) HOT 2
- Wordpress multisite HOT 1
- "Routes" missing from workers? HOT 1
- Unable to bypass at all. Documentation missing page rules.
- Worker routing problem on react app HOT 2
- nvm
- Preserving Cache Copy if 5xx error or timeout with non-KV. HOT 1
- [Question] How to purge cache once new version of site is released?
- 404 page doesn't render in HTML but plain text HOT 1
- worker-rust example does not work
- Replace `service-worker-mock` w/ Miniflare
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from templates.