Hi again,
using Google Fonts seems to be another thing where lawyers try to make money of, by sending chargeable warnings. Recommendation is to implement such used fonts locally. How can this achieved with PhotoProof? Based on my understanding the default setting within the theme is using Google Fonts, which test websites confirm.
Thanks once again for a guideline how to implement the used fonts as local components instead of being loaded from Google.
Comments
Will this do the job?
https://google-webfonts-helper.herokuapp.com/fonts/rajdhani?subsets=latin
I don't have any experience with moving Google fonts to local, but I don't know about any movement across bigger websites to move google fonts locally just to be GDPR compliant.
There was a lot of talk about it last year in May when GDPR was launched and there were many such absurds mentioned.
In your place, I wouldn't bother with it and waste time on it.
Even that we are located in Europe, we didn't switch Google fonts to local.
I know this is not a solution that you are looking for, but some words from our experience with GDPR.
With kind regards.
Well, I better don't want to gamble with it.
Adding the custom CSS to load fonts locally seems to be easy. But I yet don't know what code needs to be removed (and from which file it needs to be removed) in order to stop WP + theme loading the respective theme font from Googles servers.
I think putting the Google fonts locally has two benefits.
1. GDPR Compliance
It's still highly questionable whether remote Google Web Fonts are compliant or not. Some argue they are, due to the fact they are obligatory to make the page readable. Others (and I agree with them) argue, you could also use other, like e.g. system fonts up to the point visitors agree to load Google fonts. Because with each page load, Google is informed about this visit, as such fonts do the same job like old school counter pixels do. And this is critical in terms of GDPR in reference to the latest EJC judgement from 1.10.2019, at least w/o a prior agreeing visitor.
2. Performance
Especially as PhotoProof comes with a not so popular font, its very likely that local storage would improve page load, as it's very likely the font isn't yet cached.
Adding the fonts locally seems to have worked. However, I'm too stupid too eliminate code which causes loading the Google Web Fonts. :-/
1. Adding local fonts
Here's what I've done: I've created a new directory 'fonts' at:
/example.com/wordpress/wp-content/uploads/apollo13_framework_files/fonts
and added the respective fonts used in the theme here. Next I've added the CSS code via Customize > Custom CSS. I've noticed it doesn't make any difference whether I add code to the main theme or the child theme. Obviously these settings are shared between both?
2. Eleminating web fonts
Next I wanted to eliminate the third party references caused by Google Web Fonts. Unfortunately also none of the existing Removal Plugins available in the official WP plugin repository seem to work with PhotoProof. I've tested now six and have given up. :-/
I've learned there is a functions.php in my child theme folder, which I need to add some code in order to overrule the font loading activated in main theme settings [1]. However, with my developer mode of Safari I couldn't figure out which code. There is a webfontloader.js, which seems to be responsible for loading the selected web fonts? I also don't know what the respective, here relevant "$handle" is. Well, I'm not a javascript nor php programmer, just having normal (=user) coding skills and lost at that point.
[1] https://technumero.com/remove-google-fonts-from-wordpress-theme/
If you are using child theme you can add such code in functions.php in the child theme(at end of file). If not, add it in the same file in the main theme.
PS. You are very skilled for not a programmer!
With kind regards.
Test results confirmed I'm now GDPR compliant in terms of third-party requests. Perfect! Until impact of recent judgement can managed, this lets me sleep better.
PS: Thanks for your compliment. Well, I'm giving my best and plan not to come up with stupid questions. I'm first trying to solve things by myself, before stealing others time.
The yesterday code change to: Next, go to Appearance → Customize → Miscellaneous Settings → Use the web-font loading script → Disable.
Now it should be fine and GDPR friendly.
With kind regards.
I can confirm, the fix works! The writing effect is now back as it should.
The only thing I noticed is, once you disable the web-font loading script as described above, within the 'Customize'-panel preview window the text is not visible for some second and afterwards all texts change to some default system font. Is that the price I got to pay once working with local fonts or shouldn't it be like that? Just thought I better mention this ... ;-)
What you experience is FOUT - Flash of Unstyled Text. This is a general issue with loading webfonts for the first time to a client browser, while font file is still being downloaded from the server.
You can read something about it here https://css-tricks.com/fout-foit-foft/
With kind regards.
While I think having understood the problem well enough I yet don't know what to do now.
First off all just to clarify: Opening my site on various different clients occurred, there is no problem with loading my now local implemented Google Web fonts. None of such clients has that particular font installed locally (which I have). Thus my Custom CSS seems to work (which also the speed tests reports confirm). Hook. Within Elementor things also show up properly with the correct local font. Hook. Thus, the problem can be isolated to the WP admin, e.g. customization panel ...
The problem only occurs via Appearance -> Customize and it's 'whatever-it-uses-as-browser-simulation'. The flickering yet doesn't worry me at all, as that would be visible just to me as admin. What worries me, is that after the flash all texts show up unformatted and this situation remains forever. It looks like local fonts (loaded via Custom CSS) simply aren't processed at all. However, other stuff within Custom CSS is loaded in that preview properly.
Thus I thought having just the .woff and .woff2 versions of the fonts loaded might cause the problem (suspected WordPress implemented browser simulation for whatever reason not capable to deal with it). So I put in the full show and added the respective Custom CSS. However, also with that: No change.
Attached how it should look vs. how it looks.
Could you make the issue appear on the site so I could inspect what could be the reason for this situation in your case?
With kind regards.
I've sent you a private message with details you need.
Thanks for the access.
I didn't get it at first, that this only happens in the customizer.
I believe you shouldn't worry about this.
Why it doesn't work in th customizer?
Probably because custom font declarations have to be in the separate CSS file, so a broswer can know about it ahead of time or something. However, in the customizer custom CSS part is inlined into HTML, so that is probably the reason.
I know it was problem in the past(years ago).
However, I suspect one more reason, and probably the real one: relative paths to font files.
Instead of current
local('Rajdhani-Light'), url('../fonts/rajdhani-v9-latin-300.woff2')
try to use full URL with domain:local('Rajdhani-Light'),
url('http://yourwebsite.com/wp-content/etc/fonts/rajdhani-v9-latin-300.woff2')
Customizer works in path that has
wp-admin
so relative path will not work probably.With kind regards.
it's fixed now. Perfect!
Your second point (= relative paths) had been the reason. Once I've changed those to the full URL, it immediately worked.