Every map with Google Maps layers contains inline CSS style like this:

<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style><link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style><style type="text/css">.gm-style div,.gm-style span,.gm-style label,.gm-style a{font-family:Roboto,Arial,sans-serif;font-size:11px;font-weight:400}.gm-style div,.gm-style span,.gm-style label{text-decoration:none}.gm-style img{border:0;padding:0;margin:0}</style>

This not only borks the design of layer switcher and popups, but also adds unneeded data in form of the Roboto font.

We could probably override Google CSS back as is suggested in http://stackoverflow.com/questions/18281770/disable-css-styles-in-google..., but is there any way to remove the font?

Finally, what's the best way to do this?

Comments

Pol’s picture

This is something I cannot be of any help unfortunately...

milos.kroulik’s picture

Status: Active » Closed (works as designed)

Thanks. I was able to override those styles with more specific ones.

Fixes for my site as example:

div.openlayers-tooltip-description, div.openlayers-tooltip-name a, div.olPopup a {
font-family: Arial,sans-serif !important;
font-size:14px !important;}

div.layersDiv{
label {font-family: Arial,sans-serif !important;}
div.baseLbl, div.dataLbl {font-family: Arial,sans-serif !important;font-weight: bold;}
}