Skip navigation
pharcydeabc
Currently Being Moderated

Safari, IE, and Firefox display website type differently.

Jul 27, 2012 2:38 PM

Tags: #fonts #muse #type #browsers

I've designed my website off of a template from Muse-themes.com, which uses Adobe Typekit.  When I view the website in different web browsers the type looks different in each one.  What could the issue be?  The website is www.liveimagegreenscreen.com

 

 

 

IE: Website looks the best in IE.

IE.jpg

 

 

 

Safari:  Type is very jagged and difficult to read.

Safari.jpg

 

 

 

Firefox:  When the page is first loaded a different font appears, then changes to the correct font.

Firefox.jpg

 
Replies
  • Currently Being Moderated
    Jul 30, 2012 5:25 PM   in reply to pharcydeabc

    This is "normal" web font behavior. Each browser has it's own technology for layout out and rasterizing (specifically anti-aliasing) text. Therefore even the exact same font will appear subtlely (or sometimes not so subtlely) different in two different browsers. Short of converting the text to images (which has a lot of drawbacks) I'm not aware of any way around this. Some viewers prefer the appearance of text in IE, others prefer Safari and still others prefer Firefox. The anti-aliasing of the text is not under the website author's control. The viewer selects it consciously or unconsciously by their choice of browser.

     

    The issue is similar for the temporary load of the text in Firefox. Firefox seems to be generally biased toward showing content the moment it can, even if layout is incomplete. Some viewers prefer this, since they (at least theoretically) can begin reading the content sooner, before the initial loading and layout is complete. Other browsers lean more toward an approach that waits to display the page content until more is loaded and initial layout is complete. Some viewers prefer this approach.

     

    The Flash Of Unstyled Text is referred to as FOUT. There are numerous hacks documented online that attempt to get around it. To my knowledge, to date, there is no satisfactory solution to avoiding this in all browsers.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points