Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #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,
    Thomas

    #1346076

    @mailworm
    You can do this as follows

    1. create a directory js in the child folder
    2. put the following file named norobotofontbymaps.js in the js folder

    
    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('//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, 3 months ago by Yigit. Reason: added code tags
    #1347673

    Hey 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, 8 months ago by mailworm.
    #1349429

    Hi 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,
    Yigit

    #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'

    #1349512

    Hi,


    @Guenni007
    thanks for your input :)

    Best regards,
    Yigit

    #1349513

    Hi,


    @Guenni007
    thanks for your input :)

    Best regards,
    Yigit

    #1364163

    By 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.

    #1365013

    Hi,

    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
    Bettina

    #1365351

    Hi,

    @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,
    Mike

    #1365616
    #1371064

    nothing of the above worked on my testinstallations.

    #1371126

    Hi,
    Guenni007 you were not able to get NIXHALBES‘s solution to work?

    Best regards,
    Mike

    #1371145

    thats 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.

    #1371152

    i 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 …

    #1371156

    Next 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/

    #1371159

    Hi,
    When I tested I used the Google Map element and his instructions and it worked for me.

    Best regards,
    Mike

    #1371221

    maybe 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');
    #1371283

    Hi,
    Good point Guenni007, thanks for sharing the updated enqueue.

    Best regards,
    Mike

    #1376210

    Hey!

    With next release 5.4 I added this to core and a filter to activate it:

    
    add_filter( 'avf_gmaps_no_google_fonts', '__return_true' );
    

    Best regards,
    Günter

Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.