1 Reply Latest reply on Jul 30, 2012 5:25 PM by Zak Williamson (Adobe)

    Safari, IE, and Firefox display website type differently.

    pharcydeabc Level 1

      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.





      Safari:  Type is very jagged and difficult to read.





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


        • 1. Re: Safari, IE, and Firefox display website type differently.
          Zak Williamson (Adobe) Adobe Employee

          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.