Hi! Forgive me if there’s a better forum to post this in but I presume the solution will ultimately be a style specification.
Problem: The serif font on a site (http://www.votemonica.com) displays fine in all browsers on Windows but looks chunky/clunky (higher weight?) in Firefox and Safari on Macs. The font face is Georgia, which is available on the test Mac.
I’ve tried switching the font face to Times and (separately) setting the font-weight to 100 but the display is no better.
Currently, I have the letter-spacing set to 1px for macs only (using a php conditional) so that it’s at least easier to read. The result can be seen in the left nav menu and the headline in the red box here: http://www.jamestbaker.com/typeTroubles.png.
The windows display (which is how I would like it to appear on the Mac, too) does not include the letter-spacing and is pictured here: http://www.jamestbaker.com/fontFantastic.png
Following are the relevant styles:
.menuMainCurrent {
background: url(‘images/menuCurrentPage.png’) no-repeat;
font-family: Georgia, Times, “Times New Roman”, Norasi, Rekha, FreeSerif, serif;
font-size: 17px;
color: #FFF;
height: 26px;
width: 132px;
padding: 8px 0 0 8px;
/* php conditional to add letter-spacing for macs here*/
}
.menuMainLink a {
font-family: Georgia, Times, “Times New Roman”, Norasi, Rekha, FreeSerif, serif;
font-size: 17px;
color: #FFF;
display: block;
height: 26px;
width: 132px;
background: transparent url(‘images/menuRollover.png’) no-repeat;
background-position: 8px 0;
padding: 8px 0 0 8px;
/* php conditional to add letter-spacing for macs here*/
}
h1 {
font-family: Georgia, “Times New Roman”, Times, Norasi, Rekha, FreeSerif, serif;
font-size: 25px;
color: #FFF;
padding: 10px 0 5px 5px;
}
Can anyone tell me how to get the serif font looking cleaner (same weight?) for the Mac as it does for Windows? Thanks!