I recently ran into an issue with Google Maps and the Roboto font. On a website I was working on, which used Roboto, pages with an embedded Google Map would have slightly different font weights, and as it only changed after the map initialised, there was a distinct change as the font weights adjusted.

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.

People have been bringing this issue up for years, since at least 2014, and unfortunately Google have been effectively silent on it.

Thankfully there is a fix available on StackOverflow. Place the code below just before the line to initialise the maps such as new google.maps.Map()