fonts appear different on mac or pc browsers
 

Hi,

I've been reading a lot online about how website fonts appear differently when viewed on Mac browsers and PC browsers. (I've noticed fonts on PC's tend not to look as smooth and sometimes appear thinner, regardless of which font is used or the size selected.)

I'm wondering if there is some kind of .css or javascript fix for this and if so where would it be plugged in to the Atahualpa options?

I set up a web page (not in Atahualpa) with 2 screen shots of what a section of the website I'm working on looks like when viewed on a Mac with Safari and on a PC with IE 7 - http://uschillel.org/fontsdifferent.html (the actual website I'm working on is in Atahualpa: http://www.uschillel.org/uschillel/ )

Thanks!

Rick

I would start by playing around with various font families to see if that makes a difference.

Like Larry -my hunch would be that it's something to do with Font Families (i.e. don't Macs use Helvetica as their main sans-serif family but a PC will use Arial -similar but subtly different)

Or use a Google Fonts plugin? -

Try looking at my trial site (I don't have a Mac) in both to see if the typefaces appear the same (it uses google fonts)

www.vafocus.co.uk

Hi Larry,

Actually your site also looks very different in the 2 configurations I'm viewing. (Safari on a Mac and IE7 on a PC) Take a look at the screen shoots:

Mac (Safari): http://poetrysuperhighway.com/test/v...mac-safari.png
PC (IE7): http://poetrysuperhighway.com/test/vafocus-PC-ie7.png

In this case not only do the PC fonts seem thinner, but it actually seems like a whole different font with the font on the mac being stylized, bold and italicized.

I'll look at Google Fonts to see what it does but if that's what you're using on your site it may not be the solution.

thanks though!

Rick

Thanks Larry...I did actually try a number of font families including the very basic Helvetica, Arial, Sans Serif as well as Times, Verdana, Georgia....tried not specifying a font even just listing "serif" or "sans-serif"...in each case the display on Safari/Mac was different than that in IE7/PC.

R

Hi...quick update on this...after pulling my hair out and reading a thousand articles about this, I've discovered, at least in the case of my site, that the less-solid looking text on IE browsers was being coded by the background gradient code I have in place.

basically this code:

background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#0A284B', endColorstr='#135887');

(I grabbed this from the web and the color values aren't the same as white I'm using...)

Basically each line here tells a different kind of web browser how to do a background gradient color....the last line (which begins with "filter:" is the code for Internet Explorer...when I remove that last line, the text looks right in Internet Explorer (but the gradient is gone.)

So this isn't an Atahualpa specific issue but if anyone has any workarounds/thoughts on how to fix it so I can include a gradient color in the background of the site, I'd appreciate it.

Thanks,

Rick

This is interesting and I wonder if it's something to do with IE7? - I've never used it, having gone from IE6 to IE8 and then 9. Your IE7 image is bypassing the google font definition completely and dropping to the backup font family.

Although it looks different in chrome and IE9, you website doesn't look anywhere near as bad as your PC image on my PC with Chrome/IE9...