**This problem exists ONLY on Mac Safari**.  

Other browsers / other OS works properly.

The problem:
Observe the font weight of the top navigation here: <http://www.octa.com> (WordPress)

Then observe the font weight of the top navigation here: <http://www.octa.com/products> (Magento)

*Note* that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.

Here's the relevant bits of the css:

```
nav.menu li a {
    font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
    font-size: 20px;
    text-align: left;
}

nav.menu li a, #subnavwrapper nav li a {
    color: #FFFFFF;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    padding: 0 46px 0 0;
}

nav li a {
    display: block;
    line-height: 1em;
    text-decoration: none;
}

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-    serif;
    font-size: 14px;
    line-height: 1.55em;
    text-align: center;
    background: black;
}

```

Note that the font is imported using @font-face.

I've tried everything - many answers here on SO and other articles. Note that **none** of the below styles gleaned from other answers / resources corrected the font display.

```
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;

```