Bad webfont rendering in menu

[Kristina]

Hi Armin,
I'm using a webfont (purchased on My Fonts) on the website, I had it uploaded as .woff. It looks fine on Chrome but renders badly on Safari browser, strangely looks bad only on the menu but not anywhere else. Any reason why that happens and what should I do? To see what happens please go to http://jasonrosha.com/shazam-media-silicon-valley-ca/ on Safari browser. Thank you! Kristina

[arminunruh]

Hey Kristina!
Fonts do render slightly differently on different browsers. But on your website I see that the font renders nicely for your site title and tagline but for the menu it looks off.

I see your site title and tagline have a font-weight of 400. Your menu has a font-weight of 300. Please try to set the font-weight to "normal(400)" for your menu in "Customize" -> "Menu Style" -> "Menu" -> "Font Weight".

Also you can try this css in "Lay Options" -> "Custom CSS & HTML" -> "Custom CSS for Desktop Version"

body{
-webkit-font-smoothing: antialiased;
}

Let me know if that doesn't help :D

[Kristina]

@arminunruh Hey, thanks so much! I'm not sure if it worked. http://jasonrosha.com/shazam-media-silicon-valley-ca/ The menu still looks different from the rest. I've switched all to Light 300 now. But when I add that css code it turns all texts into the way the menu looks now :D Whereas I wish it to be the other way, the way the paragraph text looks now I want the menu to look like. They are the same font style - Soin Sans Light Oblique. If you have any other ideas let me know! If not I'll just have to leave it as it is. Thank you!

[arminunruh]

hey Kristina, I think I found the reason for the rendering problem. I'm using some css for the menu that causes this. I'm going to remove that css for a future update.

Here is how you can disable that css. Please enter this css into "lay options" -> "custom css & html" -> "css for desktop version":

nav.primary{
-webkit-transform: none;
transform: none;
}

Please note when using the css above it might not be possible to center the menu in the customizer.

[Kristina]

@arminunruh said:

nav.primary{
-webkit-transform: none;
transform: none;
}

That worked perfectly! Thanks so much for all.