Google Maps V3 - Prevent API from Loading Roboto Font

Google Maps v3 - prevent API from loading Roboto font

You can replace the insertBefore method before the Google script invokes it:

http://jsfiddle.net/coma/7st6d9p2/

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) {

        console.info('Prevented Roboto from loading!');
        return;
    }

    insertBefore.call(head, newElement, referenceElement);
};

// Check it!
new google.maps.Map(document.getElementById('map'), {
    center           : new google.maps.LatLng(51.508742,-0.120850),
    zoom             : 16,
    mapTypeId        : google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    zoomControl      : false,
    panControl       : false,
    mapTypeControl   : false
});

How I can swap google maps fonts to avoid googole page speed insight warning?

Sadly it is (as far as I am aware) impossible to actually stop this warning without some workarounds, you can't do font-swapping on resources that are injected my the Google Maps script.

However you do have a couple of options to improve performance.

Option 1 - block the Roboto font

The is a great answer on how to do this on this Stack Overflow answer.

This blocks the Google fonts CSS from being injected. You could still have Roboto loaded from your own server or a CDN where you have control over it if you wanted to use it / maintain the Google Maps aesthetics, just not from Google fonts.

This will remove the warning but obviously the down side is that you change the styling of Google Maps (which may be against their terms and conditions, good luck reading those if you want to make sure!)

Option 2 - delay the insertion of the script.

You use async on your script (you also use defer, just use async for Google Maps as an aside note, don't use both options) but it will still load too early and affect your FCP and font display.

What you could do is manually insert the script after a couple of seconds. This can be done with a simple Script insertion function and a setTimeout, which I have set as 3 seconds but you may need to adjust the timings.

function appendScript(url){
       let script = document.createElement("script");
       script.src = url;
       script.async = false //IMPORTANT
       document.head.appendChild(script);
       console.log("Google Maps added");
    }

    setTimeout(function(){
         appendScript('https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap&language=en&region=RU');
    }, 3000);

Google Maps visual refresh - how do disable font Roboto in InfoWindow

You can still use your own font in an InfoWindow. Simply provide HTML content instead of plain text, and you can style it any way you want with inline CSS or a stylesheet. Example in this fiddle:

var infowindow = new google.maps.InfoWindow({
    map: map,
    position: center,
    content: '<div class="myinfo">Computer History!</div>'
});

using this CSS:

.myinfo { font-family:Georgia,serif; font-size:18px; }

Why does loading a Google Map on my page resize everything on the page that uses the Roboto font?

Google Maps uses Roboto for it’s fonts, and because it’s not an iframe the Roboto font stylesheet needs to be imported if the site isn’t using it. The problem with this is that it also imports the stylesheet even when the site already has Roboto. Not only that, but the stylesheet is injected at the top of the head, meaning that it will override whatever Roboto fonts the site is already using. In my case, I was using the font weight 900, which Google Maps doesn’t use. This meant that all my 900 weighted fonts would adjust down to 700 once the maps initialised.

I found this solution
https://stackoverflow.com/a/35993046/2153273

The accepted answer no longer works, but there is a working solution a bit farther down. The direct link should take you to it.

Loading google maps breaks css/stylesheet

This seems to be a known issue (https://github.com/SebastianM/angular-google-maps/issues/1466).

There is a workaround which just prevents google maps from downloading the additional fonts:

<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('//fonts.googleapis.com/css?family=Roboto') > -1) {

            console.info('Prevented Roboto from loading!');
            return;
        }

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

Google Maps API changes my font-family

The code for importing the Google Maps API is ok, nothing wrong with it. What's happening is that the style is being overridden by the html style (sans-serif).

You just need to edit your css/bootstrap.min.css stylesheet and add !important to the line where you sent the font family to Roboto:

body{font-family:"Roboto",sans-serif !important;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}

Or add the Roboto font to your html style:

html{font-family:"Roboto",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

I also noticed you are linking to the Roboto font twice:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">

This will make the page display the font with the largest weight (700), which is different from the weight on the Home page (300). If you want to keep things consistent you may want to remove the first link.

Loading google maps on a angularjs site changes the font of the entire website

I think is it that on initial load you are loading Roboto with only the 300 font weight. See your network/css in dev tools.

css?family=Roboto:300
fonts.googleapis.com

When you go to the page with the map on, the API is loading all the font weight of the Roboto font

css?family=Roboto:300,400,500,700
fonts.googleapis.com

And if you look at your css you are using different font weights other that 300

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  **font-weight: 500;**
  line-height: 1.1;
  color: inherit;
}

So when the full Roboto font set is loaded in, the correct font weights are applied to the styles.

Looks like you need to use in the full range of font weights at the start, or alter your css to use the 300 weight.

Update:
See Google Maps v3 - prevent API from loading Roboto font to stop the google map api loading in Roboto font

Google Maps V3 - Prevent API from Loading Roboto Font