Help! Font in DIV above Gogle Maps thinner

Freeway
1

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

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. http://beta.ontwerpzaam.nl/commpass/contact.html Any idea how this can be fixed?

Best regards, Richard

http://beta.ontwerpzaam.nl/commpass/

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