Tagged: borlabs, google fonts, google maps, js error, loading, prevent
-
AuthorPosts
-
March 25, 2022 at 3:23 pm #1346015
Dear Kriesi-Team,
I just applied a custom change to one of my clients websites and would appreciate it very much, if you can implement that change in the next version / update of Enfold.
Situation:- We are able to substitute Google Fonts with locally uploaded fonts, which in turn prevents us from any trouble (e.g. GDPR) relating to working with Google Fonts.
- However as soon as we integrate Google Maps, which is obviously still ok from a GDPR perspective, after getting user consent, the Google Maps script will load Roboto and Google-Sans-Text fonts from Google Fonts, which counteracts with the idea above.
I found the following script to work when it comes to preventing Google Maps script to load Google Fonts. However, the script doesn’t work from my Child Theme .js, but had to be integrated in enfold/framework/js/conditional_load/avia_google_maps_api.js to take effect.
In Enfold 4.9.2 I pasted the below code to avia_google_maps_api.js, right after
$.AviaMapsAPI.prototype = { _init: function() {
// Dfmn! var head = document.getElementsByTagName('head')[0]; var insertBefore = head.insertBefore; head.insertBefore = function (newElement, referenceElement) { if (newElement.href && ( newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1 || newElement.href.indexOf('//fonts.googleapis.com/css?family=Google+Sans+Text') > -1 ) ) { console.info('Prevented gMaps from loading gFonts!'); return; } insertBefore.call(head, newElement, referenceElement); }; // .Dfmn!
Can you please find way to integrate that permanently, maybe even with an option in the Enfold settings, where end user might be able to toggle this prevention on|off?
Much appreciate your response.
Best regards,
ThomasMarch 25, 2022 at 7:23 pm #1346076@mailworm
You can do this as follows1. create a directory js in the child folder
2. put the following file named norobotofontbymaps.js in the js foldervar 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('//fonts.googleapis.com/css?family=Roboto') > -1) if (newElement.href && ( newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1 || newElement.href.indexOf('//fonts.googleapis.com/css?family=Google+Sans+Text') > -1 ) ) { console.info('Prevented Roboto from loading!'); return; } insertBefore.call(head, newElement, referenceElement); };
3. The following code is added to the Child Theme function
function agwp_addCustomScripts(){ wp_enqueue_script('norobotofontbymaps',get_stylesheet_directory_uri().'/js/norobotofontbymaps.js'); } add_action('wp_enqueue_scripts', 'agwp_addCustomScripts');
Ready now no more fonts are loaded from Google Maps
Happy Coding :D
- This reply was modified 2 years, 2 months ago by Yigit. Reason: added code tags
April 8, 2022 at 8:56 am #1347673Hey there NIXHALBES,
and hi to Kriesi Support,what I forgot to add in the hurry is: The above script works in many environments, but it does not work, when you have Borlabs Cookie in use. Tested with latest version of all. With the approach given by NIXHALBES, the page will throw a JS error. In particular at the following situations:
- Clicking on “accept all” (or whatever the wording is on the accept-all-button) in the Borlabs Cookie Popup
- Accepting 1 or more options aside of “essential cookies” and clicking on “save” in the Borlabs Cookie Popup
Generally it would be much appreciated (at least I think some to many will do so), if Enfold would have an option in the theme settings, to toggle whether Google Maps font loading shall be allowed or dis-allowed.
Happy weekend to all.
- This reply was modified 2 years, 7 months ago by mailworm.
April 25, 2022 at 5:34 pm #1349429Hi mailworm,
I am sorry for the late reply.
For your information, we have forwarded your request to our devs but please note that since this was requested for the first time, it may have a lower priority.
The code @NIXHALBES posted might need to be adjusted for Borlabs Cookie Popup. Have you contacted plugin authors? If you have not, please do so as they would have better insight on what could be causing the issue :)
@NIXHALBES Thanks for your help :)
Best regards,
YigitApril 25, 2022 at 7:43 pm #1349441@NIXHALBES try to use the code tag here on board. It is hard to look at your code if you have to rework the code on a test basis first. For example, all quotes are converted to unusable characters if you only set them as text.
PS – you can have extra entries to Content-Security-Policy in your htaccess file to avoid loading fonts from any third party place.
you can determine where fonts could be loaded:font-src 'self'
April 26, 2022 at 12:06 pm #1349512April 26, 2022 at 12:06 pm #1349513September 7, 2022 at 7:55 am #1364163By the way : Borlabs provides a free download around this topic.
https://de.borlabs.io/borlabs-font-blocker/but i had to test now – However, I’m afraid that if I allow Maps, it will allow the fonts after all. Which is an academic question whether it makes sense to block the font and allow the other maps functions.
September 14, 2022 at 4:40 pm #1365013Hi,
as a designer I guess I don’t really understand what I have to do to load Google fonts locally for Google Maps.
I don’t have a child theme.
I already uploaded Roboto with the other Google fonts I use on the website (with your instruction to load Google fonts locally I could manage that)
I don’t use Borlabs Cookie Popup.Can I use NIXHALBES first Code or should it be different?
And where do I paste that code? In Quick CSS?Best regards
BettinaSeptember 17, 2022 at 6:45 pm #1365351Hi,
@Thina thanks for your question, I have tested @NIXHALBES function and it is working for me just by following his instructions.
But if you are not using a child theme your changes will be lost with future theme updates, so please use a child theme Get it here.
Then you will need to create a directory named js in your child theme.
Then create a file named norobotofontbymaps.js whith the code above, I have uploaded the one I used here.
Finally, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:function agwp_addCustomScripts(){ wp_enqueue_script('norobotofontbymaps',get_stylesheet_directory_uri().'/js/norobotofontbymaps.js'); } add_action('wp_enqueue_scripts', 'agwp_addCustomScripts');
If you have any trouble please create a new thread and include a recap, FTP access, and WordPress admin access in the Private Content area. Since this is not your thread posting your login here will not be private and you will not see anything we write in the Private Content area.
Best regards,
MikeSeptember 20, 2022 at 5:35 am #1365616you can try this https://wordpress.org/plugins/local-google-fonts/
November 2, 2022 at 2:59 pm #1371064nothing of the above worked on my testinstallations.
November 2, 2022 at 7:11 pm #1371126Hi,
Guenni007 you were not able to get NIXHALBES‘s solution to work?Best regards,
MikeNovember 2, 2022 at 8:08 pm #1371145thats right – i now try to first register the external script and enqueue then. Maybe that makes a difference. …
No effort – how do you look – if fonts are loaded from external Sources ? i do it only with developer tools – on chrome – and there are always google fonts.
And even Google Fonts Checker comes to the same result.I tested it with Borlabs Cookie Plugin deactivated – and with only Google Maps ALB.
November 2, 2022 at 9:16 pm #1371152i think it is better to load it as early as possible – maybe in the head:
function no_google_font_loading() { ?> <script> var head = document.getElementsByTagName('head')[0]; var insertBefore = head.insertBefore; head.insertBefore = function (newElement, referenceElement){ if( newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1 || newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Google+Sans+Text') > -1 ) if(newElement.tagName.toLowerCase() === 'style' && newElement.innerHTML.indexOf('.gm-style') > -1){ return; } insertBefore.call(head, newElement, referenceElement); }; </script> <?php echo '<style type="text/css"> .gm-style * { font-family: Helvetica,Arial,sans-serif !important;}.gm-style-cc, .gmnoscreen {display: none !important}</style>'; } add_action('wp_head', 'no_google_font_loading');
BUT: this will not work on iframe!to be continued …
November 2, 2022 at 10:59 pm #1371156Next option to embed a google map is using the google maps script api
and just after the
function initMap()
and before the info window and markers are set – insert the code from above in that manner:var head = document.getElementsByTagName('head')[0]; var insertBefore = head.insertBefore; head.insertBefore = function (newElement, referenceElement) { if( newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1 || newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Google+Sans+Text') > -1 ){return;} insertBefore.call(head, newElement, referenceElement); };
that will work too. see: https://enfold.webers-webdesign.de/google-maps/
November 3, 2022 at 12:44 am #1371159Hi,
When I tested I used the Google Map element and his instructions and it worked for me.Best regards,
MikeNovember 3, 2022 at 1:06 pm #1371221maybe a force to enque it in header ( in_footer : false) brings the effort.
the script from above had to be loaded before the gmaps scirpt.
i do not know if js merging is set – if this is always the case – on my installation it does not work that way.so maybe this has to be done for all possible constallations:
function agwp_addCustomScripts(){ wp_enqueue_script('norobotofontbymaps',get_stylesheet_directory_uri().'/js/norobotofontbymaps.js', array(), $vn, false ); } add_action('wp_enqueue_scripts', 'agwp_addCustomScripts');
November 3, 2022 at 10:27 pm #1371283December 14, 2022 at 6:54 pm #1376210 -
AuthorPosts
- You must be logged in to reply to this topic.