Help! Font in DIV above Gogle Maps thinner

Freeway
1

I’ve got this site in beta: ontwerpzaam.nl

The menu-items in the CSS Menu which has a jpeg in the background are thin and white.

Hoever, when the jpeg is replaced by Google maps, the font seems to be even thinner than normal. ontwerpzaam.nl Any idea how this can be fixed?

Best regards, Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hey Richard,

It only seems to be happening in Safari, and has something to do with the
way Safari anti-aliases fonts in certain circumstances. I did not find an
obvious workaround, though deleting the Google content solved it. I might
look at transparency issues… but that may not be the way either.

I tried Roboto font (since you had the Google code in the head) and it
looked nice… I also tried Google’s version of Titillium and it looked the
same as yours. I even tried heavier weights, though with no success, so it
may be the font + Safari’s font-smoothing that is triggering this. It looks
fine in Chrome and Firefox.

–

–
Ernie Simpson

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Ernie is right. I have this problem occasionally in Safari as well.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi Richard,
The following style, added to the head of your page, should fix the issue;

<style>
    * {
    	-webkit-font-smoothing: subpixel-antialiased !important;
	}
</style>

See this thread; http://freewaytalk.net/thread/view/137717
Regards,
Tim.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Richard,

Here’s the fix:

html { -webkit-font-smoothing: subpixel-antialiased; }

subpixel-antialiased is usually Safari’s default font smoothing, but for some odd reason that I can’t figure out, your navigation is instead rendered using antialiased. This CSS should fix it.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Tim, you are too fast. Arg!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Wow. That’s good to know. Thanks guys.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Oh wow, never would have come up with that, that’s where knowledge lacks I assume :wink:
All of you, many thanks, I think I will embed this in my master template, and yes … you certainly are fast :slight_smile:

PS - As expected, it works … of course

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options