#3817 - Ensure we are using web font loader with Google Fonts
-
By Chris Graham
- Added
- 4 views
| Identifier | #3817 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | Ensure we are using web font loader with Google Fonts |
| Status | Completed |
| Tags |
Roadmap: v11 (custom) Type: Performance (custom) |
| Handling member | Chris Graham |
| Addon | core |
| Description | We must not have any Google Fonts blocking the critical rendering path.
Google does provide a solution for this: https://www.lockedownseo.com/load-google-fonts-asynchronously-for-page-speed/ |
| Steps to reproduce | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".
Comments
It's use is controlled via a config option, as there's a tradeoff involved. Basically with JS loading you have the font show later, but with no potential for blocking the critical rendering path. I've explained this in the option's help.
I did look at other possibilities, mainly:
1) Just bundle Google Font .ttf files (or whatever) directly
2) Write our own deferred loading code
3) Do the trick where you say media="none" onload="this.media='screen';"
4) Whether there's a defer attribute on the <link> tag yet
5) Whether the <link> tag can just be put at the end of the HTML
1) A lot of messing about and you lose the advantage of Google's CDN and a shared cache pool and Google's ability to customise output CSS based on user agent
2) Better to use official lib, they must have made it for a reason too, probably manages network traffic well
3) Not possible with CSP. We would have to either allow inline JS, or have some very ugly <script> tag in our <head>, or write some complex code to try and detect if a <link> tag was loaded yet which is possibly unreliable. And it relies on the browser supporting dynamically changing the media attribute. Also see 2.
4) There's not.
5) Invalid HTML.