[Resolved] Problem with deactivating Google Fonts

[Erika]

Hi there,

we use GP with Elementor on this site. In Elementor the use of Google fonts is deactivated and we use local fonts that are added in Elementor.

I added the code snippets to deactivate google fonts and remove them from the customizer:
add_action( ‘admin_init’, function() {
add_filter( ‘generate_google_fonts_array’, ‘__return_empty_array’ );
} );

add_action( ‘wp_enqueue_scripts’, function() {
wp_dequeue_style( ‘generate-google-fonts’ );
},99 );

I added the font as described in the Documentation, however I encounter these problems:
1) the google font Cormorant Garamond is still listed in the customizer, although I have set all fonts to inherit and use elementor´s typographic setup (where I use only the uploaded fonts)
2) adding the Cormorant Garamond font locally in the customizer fails, if I want to choose the font, I only get the google font as possible choose
i. e. if I click on Typography, I see all the submenu für typography of header, body, etc. and not the button ADD FONT like in the documentation
3) in the source code I still see that google fonts are getting loaded, just can´t find where they come from

What should I do in order to deactivate the google font and use only local fonts instead?

I know it is a mixed problem with Elementor, but you might have an idea to that before I carry on with the Elementor support…

Thanks,

Erika

[David]

Hi there,

i checked a few pages on yours site and the request for Cormorant Garamond is always a local request from wp-content/uploads/cormorant-garamond-v16-latin-600.woff2

The only fonts i see being loaded from Google Font API is the Roboto font and that looks to be coming from the Google Map loading on the homepage.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erika]

Hi David,

well, yes, I was busy in the meantime and finally managed to set up the local fonts in GP & Elementor. On the first site: where can you see that the google font loads? On my check there was no google font loaded before the consent.

On the whole story lets make one step back. I made a try on our site (second site, which uses only GP and GB) and did these actions:
– added two fonts locally (downloaded, uploaded, added css)
– with the two code snippets (remove google fonts) I removed the google fonts and the fonts from customizer
– changed the general settings to use dynamic typography system
– added the fonts and made sure the google font is not toggled (used locally)
– added the fonts to Typography Manager
– I also changed the extra settings in Autoptimize not to load google fonts

I think I did everything fine, the font Nunito is not anymore listed to be loaded from google, but Roboto still is.

So again here the question: where can I see in which places the font is used and how can I change completely to local use?
I found with the inspector that roboto is used on the google map – is there a way to change the use to local while using the google map?

Thanks, I hope you can follow me.

Erika

[Fernando]

Hi Erika,

You’re right. This seems to be an issue with Google Maps. I found a possible solution here: https://github.com/google-map-react/google-map-react/issues/836

Also see: https://stackoverflow.com/questions/25523806/google-maps-v3-prevent-api-from-loading-roboto-font

I tried looking at your site however, and I can’t seem to see Roboto loaded anymore, or any Google font for that matter.

[Erika]

Hi Fernando,

unfortunately the roboto font is still listed if I check the site with a GDPR tool.

I looked at the offered solutions, but I can not figure out where to place the js-script. Google Maps is insterted with iframe and I can´t either get it worked if I insert the js in the element, nor if I create a html snippet and insert it there. Can you tell, how/where I should try to insert it?

Second: even if I delete the google map <iframe> everywhere, I still get the notification that the site uses Roboto.

Thanks, Erika

[David]

Not sure if this will work in your instance, but reading on various forums a few users have had success with the following script.

1. Activate the Elements Module in Appearance > GeneratePress.
2. Create a new Hook Element in Appearance > Elements
3. In the Hook Element text area add:

<script>
var head = document.getElementsByTagName('head')[0];

// Save the original method
var insertBefore = head.insertBefore;

// Replace it!
head.insertBefore = function (newElement, referenceElement) {

    if (newElement.href && newElement.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) {
        return;
    }

    insertBefore.call(head, newElement, referenceElement);
};
</script>

4. Set the Hook to wp_footer
5. Set the Display Rules > Location to the Page(s) the Google Map is on. For the Home page, there is a Location of Front Page that you should use.

Info on Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erika]

Hi David,

nice, thanks.

Finally I created TWO hooks, the one above and one with this script:

<script>
var head = document.getElementsByTagName('head')[0];

// Save the original method
var insertBefore = head.insertBefore;

// Replace it!
head.insertBefore = function (newElement, referenceElement) {

    if (newElement.href && newElement.href.indexOf('https://fonts.gstatic.com/s/roboto/v18/') === 0) {
        return;
    }

    insertBefore.call(head, newElement, referenceElement);
};
</script>

I took the link from the GDPR query for this second script and for whatever reasons, the two hooks together work. I tested it on two sites. On the first all work nicely.

On the second, all images, button, google map disappear when I activate your script with this second script AND in Autoptimze the lazy load is not activated. So either I have the images and the font or the font is disabled with no images on the site 🙂 I can´t really see the relation between the two factors. However the lazy load handles more or less the image problem.

It is crazy. I leave both hooks active and activate the lazy load, so the images are shown. Could you check what happens to the Teamviewer button top right (showed double)?

Thank you!

[David]

i can’t see anything that would cause an issue with loading images or buttons.
The Teamview image the second image has a class of ls-is-cached – is there a litespeed cache on the server ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erika]

Hi David,

I made some tests on different sites. The issue on this site was a collision with Autoptimize for whatever reasons.

Thank you!

Erika

[David]

Glad to hear you found the issue

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts