Google Map Roboto Font in Greek site using Roboto - google-maps

Question

I have a huge problem with the rendering of the font 'Roboto' on the embedded google maps on my site:
Last year we decided to use on our site the font Roboto to render our head titles and vignette.
The site it's in greek language and so i loaded the fonts with greek extended:
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:900|Tinos:700&subset=greek-ext,latin-ext);
My problem now is: when my page load it does load the fonts right, but when it comes the embedded Google map, my fonts got lost...
I guess google maps load the 'roboto' font without the support to greek language and does an overwrite to my command... am I right?
Can somebody help?

Answer 1

I had the same problem with exactly the same font. When Google Maps has loaded their fonts all my previous styles changed. I decided to use simple solution. When You have Your web font link, for example:
<link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
It produces:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As You see it has font-family property. I've decided to change it to, for example, to 'RobotoL':
#font-face {
font-family: 'RobotoL';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
And then use it in your document, for example:
body {
font-family: 'RobotoL';
font-weight......
}
Then there is no need to use Google generated import or link, but write Your own. There is no Google Maps Roboto Font problem after version 3.14 any more )
There is only one tricky part to extract this long .woff url after Google inserts it, but You can do it easily using every modern browser developer tools (Firebug etc). I think it works for Condensed and other Roboto versions as well.

Answer 2

Ok, thanx for the workaround a lot!
So, I downloaded the fonts I use from fontsquirrel.com; Roboto, thank Christian Robertson, is a free web font ;)
I left the css code suggested from fontsquirrel (here an example from a specific type):
#font-face {
font-family: 'robotobold';
src: url('/fonts/Roboto-Bold-webfont.eot');
src: url('/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
font-weight: 700;
font-style: normal;
}
and changed, as you told, all the calls to the font:
.class{font-family: 'robotobold', sans-serif;}
It's working with the Google maps, thanx!