G’day caslavak,
The font used by your browser to display the location title doesn’t have those characters, so your computer has found a backup font that does — and the backup font doesn’t have a bold style. The font used on my computer (running Linux) does have a bold style, so this is what I get:
https://dl.dropboxusercontent.com/u/26305751/flxmap-DiscGolfPark.png
The title text uses the following font-family spec:
Roboto, Arial, sans-serif
Roboto is a font loaded via Google Webfonts, and it seems to have those characters. My guess is that either your computer is blocking Google Webfonts, or it has a rendering problem. What OS and browser/version are you running?
cheers,
Ross
Hold that thought… I had checked with a centre-coordinates map, just tried with your KML map and got your problem. Will investigate!
Aha. It looks like the problem is actually with the Roboto font at Google Webfonts.
Google Maps is loading it with styles for normal / weights 300, 400, 500, 700. Titles in centre-coordinates maps use “bold”, which is font weight 700 (my plugin sets font weight there). Titles in KML maps use font weight 500. It appears that Roboto doesn’t have all the characters in font weight 500, so it’s falling back to font weight 400 for those.
You can kludge a fix by adding this CSS to your theme. NB: this will affect all text within infowindows, not just the titles!
.flxmap-container .gm-style .gm-style-iw div {
font-weight: 700 !important;
}
I recommend you also contact the Google Webfonts and Google Maps teams, and let them know about the problem.
cheers,
Ross
Your fix is working, thanks.
Bold HTML description is not a problem, I’ll use inline CSS for that. Now I noticed there is a opposite problem with text when I want directions – picture here. I’ll try contact Google for solution.
Thank you again!
Kuba
G’day Kuba,
SWMBO, the CSS guru here, tells me that she solves problems like this by directly targeting elements with the offending inline styles, like this:
.flxmap-container .gm-style .gm-style-iw div[style*='font-weight: 500'] {
font-weight: 700 !important;
}
That way, only the title has its font weight changed. Perhaps you can do something similar with your directions problem.
cheers,
Ross
Well, I won’t contact them. I wasn’t able to find out how to contact them O:) Do you think it is possible to change font?
You could try this:
.adp {
font-family: your-pick-of-fonts !important;
}
(untested, have a play)
cheers,
Ross
Nice, it’s working! I always forget about !important tag.
Thanks!
For others, solution was this:
.flxmap-container .gm-style .gm-style-iw div[style*='font-weight: 500'] {
font-weight: 700 !important;
}
.adp {
font-family: "Titillium Web", Arial, sans-serif !important;
}
