Font in Navigation Different on Firefox and Chrome

[SimplyAA]

Hi there.

I'm using the Altitude theme and having issues with the main navigation menu font. It looks great in Firefox but in Chrome and Safari the font is sort of fuzzy. The site isn't live so I am attaching images. I would really appreciate any insight.

Thank you.

Firefox:
http://www.loveasimplelife.com/temp/firefox.png

Chrome (and same in Safari):
http://www.loveasimplelife.com/temp/chrome.png

---

Angela

[David Chu]

Hi,
It's a good example of how fonts do vary in appearance, and very skinny ones really stand out as tricky. I can't comment specifically because I don't have a link, so my comments will be very general.

Given what you're saying, this font probably causes some issues for Webkit, which is the engine for those browsers. With any very skinny font, I've found that if you use the smallest size possible, you may have this type of trouble.

Again, I can't see your code, so it may be the font-weight, the font-size, letter spacing, even color, or something else.
If it were me, I would just try bumping up the font size by 1 or 2 pixels, and that would probably get more clarity. The viewers with non-perfect eyesight would applaud, too. 😉

Good luck,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[detroitwidget]

Hi Angela,

Ditto Dave's suggestions above.

I've also had luck on occasion by adding one of the following CSS declarations:

-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

I hope this helps.

[David Chu]

Detroit,
Very nice idea! That could cure Webkit.

Speaking of that, Angela, maybe you already did this, but you'll probably want to test in that nutty IE as well. 😉

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[SimplyAA]

Hi guys,

Thank you for the feedback.. I really appreciate it. I've never used the webkit can you tell me I put that in my CSS and exactly how?

Thank you

---

Angela

[aabharan]

Hello SimplyAA, I just found the solution for you http://stackoverflow.com/questions/4698564/fonts-looks-different-in-firefox-and-chrome Just hit the URL and look at the source code. You will easily overcome with your problem. After reading this if you still facing a problem please let me know.

Cheers, Aabharan

[detroitwidget]

Angela,

On or about line 1043 of the Altitude Pro default style sheet (style.css), change this:

.genesis-nav-menu > .menu-item > a {
          text-transform: uppercase;
}

To this:

.genesis-nav-menu > .menu-item > a {
          text-transform: uppercase;
          -webkit-font-smoothing: subpixel-antialiased;
}

If you're feeling brave you can also experiment with the default body settings around line 141. Deleting or changing the WebKit font smoothing value may generate some interesting results:

body {
	background-color: #fff;
	color: #000;
	font-family: "Ek Mukta", sans-serif;
	font-size: 20px;
	font-weight: 200;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

Consistent font rendering across all browsers is always a challenge. And font smoothing is a notoriously unpredictable property. As Dave suggested, my first approach is to play with the font weight and font size properties.

("WebKit" is just the name of the page rendering engine used by the Safari web browser. A modified version of WebKit is also used in Google Chrome; hence these two browsers frequently exhibit similar behavioral "quirks.")

I hope this helps.

Phil

[SimplyAA]

Wow! You guys are brilliant. Thank you all. I took the easy route and did Phil's suggestion. Once I added that one line of code it was 100% better. That is amazing!

Thank you again. I really appreciate it.

---

Angela

[Author]

Posts