Before you ask please READ THIS

HowTo Make Google Fonts local

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

  • edited November 2019 Posts: 89
    Post edited by MLG76 on
  • AirAir
    Posts: 10,970
    Hey there:-)

    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.
  • Posts: 89
    Thanks also for your reply on this.

    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.

  • edited November 2019 Posts: 89
    Update!

    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/


    Post edited by MLG76 on
  • AirAir
    Posts: 10,970
    MLG76 said: Adding the fonts locally seems to have worked. However, I'm too stupid too eliminate code which causes loading the Google Web Fonts. :-/
    Hey :-)

    If you are using child theme you can add such code in functions.php in the child theme(at end of file).
    add_action('after_setup_theme', function(){
        remove_action( 'wp_head', 'apollo13framework_get_web_fonts_dynamic' );
        remove_action( 'wp_enqueue_scripts', 'apollo13framework_get_web_fonts_static' );
    },12);
    If not, add it in the same file in the main theme.

    PS. You are very skilled for not a programmer!

    With kind regards.
  • edited November 2019 Posts: 89
    Air, you're the man! Your solution finally worked!

    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.
    Post edited by MLG76 on
  • AirAir
    Posts: 10,970
    Keep it going this way :-) !
  • AirAir
    Posts: 10,970
    OK.

    The yesterday code change to:
    add_action('after_setup_theme', function(){
        remove_action( 'wp_enqueue_scripts', 'apollo13framework_get_web_fonts_static' );
    },12);
    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.
  • Posts: 89
    Air, once again thanks for fixing things that quickly! You are indeed faster than real Apollo13 space ship. ;-)

    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 ... ;-)

  • AirAir
    Posts: 10,970
    MLG76 said: 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?
    It is not connected to the setting in the Customize panel, as this was for another purpose.

    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.
  • edited November 2019 Posts: 89
    Thanks for the article. Read it (and some others reg. this topic).

    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.

    Bildschirmfoto 2019-11-12 um 20.03.56.png
    1944 x 1052 - 792K
    Bildschirmfoto 2019-11-12 um 20.03.31.png
    1744 x 714 - 542K
    Post edited by MLG76 on
  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 89
    Unfortunately not. On the site it works.

    I've sent you a private message with details you need.

  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 89
    Hi Air,

    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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!