User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Prefetch = load an asset for the next navigation (this is very low priority)
Preload = load an asset with higher priority for the current page
In short, proload is what is needed for the css (color, fonts)
This PR is essentially is implementing basically the https://css-tricks.com/the-fastest-google-fonts/ with some extras:
the webfont will also be available even if Javascript is disabled (the same thing I did for font awesome)
the preload is done in the actual headers of the response
Inlined the CSS Properties for all the fonts
The code is written in a way that a custom google font URL can be used (not exposed to UI, but a simple input and a toggle button will do the trick)
There are changes in the SQL that are not automatically applied
There are SCSS files that were deleted
Apply the PR, and make sure to save the Cassiopeia default style!!!
Check all the fonts and the loading (preferably by emulating a very slow connection)
Status | New | ⇒ | Pending |
Category | ⇒ | Front End Templates (site) NPM Change |
Labels |
Added:
NPM Resource Changed
?
|
as it is right now it cant be accepted.
as it is right now it cant be accepted.
Then all the Google (or any other remote source) based fonts need to be completely removed as the implementation is totally bs. Wrong usage of prefetch, extra imports, etc it's a disaster...
If the site is behind a firewall then loading a font from google or a script from a cdn will not work
If the site is in Germany then they are saying that accessing google fonts is a GDPR breach.
To the best of my knowledge there are no assets being used by core, by default, that are being loaded from an external source.
If a site owner wants to use scripts from a cdn or fonts from google then that is their choice but it can not be the default.
This discussion has been held numerous times and I really dont want to repeat it.
As far as I can see, stuff from Google would only be loaded if one has selected a fonts scheme in template settings which uses Google, but not if "None" or "Roboto (local)" are used, as far as I can see, so that should not be different to what we have now.
But if you select a local fonts scheme, the change here hardcodes the font family to "Roboto". That means if someone adds another local font scheme in his or her template copy, he or she has to edit code in the 4 PHP files, while now it just needs to add another (s)css at a special place, which does the includes. It might not be nice like it is now, but it was easier to maintain than it will be with the changes here.
But if you select a local fonts scheme, the change here hardcodes the font family to "Roboto".
I could restore the values in the scss for local and adjust the if/else, fixable
@richard67 local fonts now declare their css vars using the scss/css file.
It might need some time until I can test that because I'm currently fighting with another issue with the extensions installer for my latest PR.
No need to hurry, if it is not in tomorrow it will be in next time for sure. From review it looked ok to me, but I haven't found time yet for testing.
@dgrammatiko I tested the PR but for some reason the web fonts don't work. On the other hand Roboto local is working like before.
@richard67 can you share the request header for those pages?
@dgrammatiko FYI the font is loaded in the Chrome inspector network tab but not applied. Probably a CSS issue?
Labels |
Added:
?
Removed: ? |
I have tested this item
javascript:
Never mind the comment
I have tested this item
Works better
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
@bembelimen can I have a decision here?
As it's targeting 4.0 it's still @wilsonge call, but in my opinion the preload approach is correct, so in general: yes we should go for it.
Two things has to be fixed:
(Last but not least I'm in general not happy about the inflexible way of setting the fonts in the core templates, it's rather hard to implement own fonts, but that's an issue for another PR I guess)
Loading directly from Google could really be an issue in Germany the EU. So at least we should offer a local solution beside the online one.
I'm really not sure what you mean here, Brian also mentioned that before. Let me explain that this PR is not changing anything fundamental here. Before this PR there was an @import
that was pointed at Google's Font CDN. All this PR is doing is eliminating that extra CSS file and importing the CSS directly from the CDN (eg one less round trip to the server). Also, the local option is still there, I didn't change that.
About the So at least we should offer a local solution beside the online one.
:
I had a draft PR for localizing the G-Fonts #30914 but people were against it (btw WP is doing that)...
I'm really not sure what you mean here, Brian also mentioned that before. Let me explain that this PR is not changing anything fundamental here. Before this PR there was an
@import
that was pointed at Google's Font CDN. All this PR is doing is eliminating that extra CSS file and importing the CSS directly from the CDN (eg one less round trip to the server). Also, the local option is still there, I didn't change that.
I fully confirm that this PR changes nothing on the local fonts option and in case of web fonts where they come from, it just eliminates the extra CSS. For the issue with loading web fonts from Google and privacy regulations we have that yellow hint below the "Fonts Scheme" field in the template style's advanced options.
Loading directly from Google could really be an issue in Germany the EU. So at least we should offer a local solution beside the online one.
I'm really not sure what you mean here, Brian also mentioned that before. Let me explain that this PR is not changing anything fundamental here. Before this PR there was an
@import
that was pointed at Google's Font CDN. All this PR is doing is eliminating that extra CSS file and importing the CSS directly from the CDN (eg one less round trip to the server). Also, the local option is still there, I didn't change that.
My bad, didn't check the deleted files.
Here are some PHP suggestions: dgrammatiko#3 otherwise it's good to go
Labels |
Added:
?
?
Removed: ? |
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-09-04 07:34:54 |
Closed_By | ⇒ | bembelimen |
Thx
@richard67 shall I leave the db changes for the update to you or do you want me to try a fix?
@richard67 shall I leave the db changes for the update to you or do you want me to try a fix?
@dgrammatiko Let me do it. I know you can do it, too, but there might be other change being merged before the next release which require files and folder to be deleted, too, and I could that into 1 PR.
for what I thought were fairly obvious reasons the fonts can not be loaded directly from google in the default template.