Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

fonts appear different on mac or pc browsers


  #1  
Old Sep 1, 2011, 10:13 PM
rickpoet
 
70 posts · Jan 2010
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

Last edited by rickpoet; Sep 1, 2011 at 10:36 PM.
  #2  
Old Sep 2, 2011, 07:18 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I would start by playing around with various font families to see if that makes a difference.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Sep 2, 2011, 09:12 AM
GarethP
 
64 posts · Jun 2010
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
  #4  
Old Sep 2, 2011, 11:38 AM
rickpoet
 
70 posts · Jan 2010
Quote:
Originally Posted by GarethP
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
  #5  
Old Sep 2, 2011, 11:40 AM
rickpoet
 
70 posts · Jan 2010
Quote:
Originally Posted by lmilesw
I would start by playing around with various font families to see if that makes a difference.
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
  #6  
Old Sep 2, 2011, 04:23 PM
rickpoet
 
70 posts · Jan 2010
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
  #7  
Old Sep 3, 2011, 02:55 AM
GarethP
 
64 posts · Jun 2010
Quote:
Originally Posted by rickpoet
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.
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...

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Rounded tabs fix for IE browsers? vincent Page & Category Menu Bars 1 Nov 22, 2010 03:41 PM
Having Trouble Displaying Across browsers rdeschene Atahualpa 3 Wordpress theme 5 Oct 17, 2010 05:03 AM
Browsers styling problem Hellvis Header configuration & styling 2 Jan 15, 2010 05:38 AM
Problems with header in different browsers theassembly Header configuration & styling 3 Oct 9, 2009 03:19 PM


All times are GMT -6. The time now is 01:08 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.