Safari 3 Text Display Problems

Posted on June 13, 2007.

 **** UPDATE Update: 19 March 08 Safari 3.1 for Windows is out of Beta and available from www.apple.com/safari ****

Update: If you are running Safari on Windows and it crashes a lot, read this instead

On Monday (11 June 07) Apple announced at the WWDC that they were releasing a beta version of their web browser, Safari, for Windows. This was seen as quite an event as it’s the first time ever that Safari has been available for Windows. Until now, it had only been available for Mac and is the default browser bundled with any new Mac. This beta release of Safari 3 is also available for Mac and will be the default browser that ships with the new OS X Leopard when that is released later this year in October. The buzz around the release of Safari 3 was fuelled partly by the claim that Safari 3 is the fastest browser available for Windows. Apple’s publicity about the new version claims that it is twice as fast as Internet Explorer 7. On first impressions it certainly seems to render some web pages much faster than other browsers.

Safari Font Bug

But some windows users (including me) were simply not able to see anything in the new browser when they first installed it. I was unable to type anything in the address bar or type in the integrated Google search box. As the screen shot below shows, no menus are visible either.

Safari 3 For Windows Screenshot

After spending some time on the Apple discussion forum and following the bug reports, I managed to work through the solutions proposed by various contributors and get the browser working. (This article is based on a solution initially discovered by critter42) Please note that this problem only affects certain Windows users of this beta version of Safari. This is of course a beta release and while this term has come to be an essential marketing tag to indicate cool and cutting edge, ultimately we should not forget it just means an unfinished release that’ll be a bit buggy. That said, this problem rendered Safari completely unusable. A patch for this problem will probably be implemented very quickly as there has been so much news hype surrounding this launch that a far wider group of users than web developers will probably be trying this beta out. In the meantime, here’s a solution to the problem.

A Summary Of The Problem

So the problem manifests itself in the following ways:

  1. Safari 3 menus (File, Edit, View, Help etc) do not display
  2. right clicking brings up empty context menus
  3. no text appears on web pages OR only some text appears OR text only appears on some web sites

The Cause Of This Safari Bug

Put simply, the absence of text is related to Safari not knowing where to find the fonts that it has been asked to display. When Safari is installed on Windows, it scans your fonts folder and builds a list of your fonts. To be more precise, it builds a list of all the font files in your folder. Some fonts are made of several files using separate files for a bold variant, for the italics variants and so on. So if you have 50 fonts on your machine, you could have over 200 font files on your PC. It seems that the process of building this font file list is somehow incomplete. Some reports say that the process can only list 800 font files and then ends. Others say that some of the file names trip up the process and create an invalid XML file.

Certain Fonts Won’t Display

If you are experiencing this problem the temporary solution is to add the most common web fonts to this list. I could see some text on some sites and think that these were sites using Arial. Because it begins with an A it was included in the font list the installation created. However, sites using Times New Roman, Lucida, Trebuchet and Verdana were not displaying text. Because a site might use Times Roman for headings and Arial for the paragraphs, it also explains why on certain occasions some people could see body text, but not headings and vice versa.

The Solution

One solution would of course just be to uninstall the beta and wait until a decent release candidate is available. But while the consequences of this bug render Safari useless, it’s not a damaging bug and it can easily be worked around to get Safari 3 up and running on your Windows box. This fix works for Windows XP. File paths will be different in Vista. First of all, exit Safari if it’s open and follow these five steps.

Step 1. Copy the Mac Fonts To Your Fonts Folder

OS X uses Lucida Grande as one of it’s default fonts.You’ll find the Lucida fonts in C:\Program Files\Safari\Safari.resources Copy Lucida Grande.ttf and Lucida Grande Bold.ttf to C:\WINDOWS\Fonts

Safari Resources Folder

Step 2. Open The Folder Containing The Font List File

Safari Font ListNow you need to locate the file that contains the list of font files created by the Safari installation. The file is called Fonts.plistIt’s in C:\Documents and Settings\[YOUR USERNAME]\Local Settings\Application Data\Apple Computer\Safari On Vista the path is C:Users\[YOUR USERNAME]\AppData\Local\Apple Computer\Safari\Fonts.plist Make sure that you replace [YOUR USERNAME] with your username.

Step 3. Make A Copy Of The Font List File

Make a copy of the file before opening it and making any changes.

Step 4. Identify Which Fonts Are Missing

Now right click on the file and open it in a text editor. The file is XML so an application that will maintain the indenting of the file is best as it’ll make it a lot easier for you to read the file contents, but Notepad will do if that’s all you have. You’ll see something like this picture below.

XML

Each <key> tag contains the name of a font and each <string> tag contains the location of this font file. Scroll to the file until you are nearly at the end of the list and identify which was the last font added to the list.

Step 5. Add The Required Fonts

If the last font added to the list began with the letter F then copy the XML in the text area below from <key>Georgia</key> to the bottom and add it to the Fonts.plist just before the first closing </dict> tag.

<key>Arial</key>
<string>C:\WINDOWS\Fonts\ARIAL.TTF</string>

<key>Comic Sans</key>
<string>C:\WINDOWS\Fonts\comic.TTF</string>
<key>Comic Sans Bold</key>
<string>C:\WINDOWS\Fonts\comicbd.TTF</string>

<key>Courier</key>
<string>C:\WINDOWS\Fonts\COUR.TTF</string>
<key>Courier Bold</key>
<string>C:\WINDOWS\Fonts\COURBD.TTF</string>
<key>Courier Bold Italic</key>
<string>C:\WINDOWS\Fonts\COURBI.TTF</string>
<key>Courier Italic</key>
<string>C:\WINDOWS\Fonts\COURI.TTF</string>

<key>Georgia</key>
<string>C:\WINDOWS\Fonts\georgia.TTF</string>
<key>Georgia Bold</key>
<string>C:\WINDOWS\Fonts\georgiab.TTF</string>
<key>Georgia Bold Italic</key>
<string>C:\WINDOWS\Fonts\georgiaz.TTF</string>
<key>Georgia Italic</key>
<string>C:\WINDOWS\Fonts\georgiai.TTF</string>

<key>Lucida Grande</key>
<string>C:\WINDOWS\Fonts\Lucida Grande.ttf</string>
<key>Lucida Grande Bold</key>
<string>C:\WINDOWS\Fonts\Lucida Grande Bold.ttf</string>

<key>Tahoma</key>
<string>C:\WINDOWS\Fonts\Tahoma.TTF</string>
<key>Tahoma Bold</key>
<string>C:\WINDOWS\Fonts\tahomabd.ttf</string>

<key>Times New Roman</key>
<string>C:\WINDOWS\Fonts\TIMES.TTF</string>
<key>Times New Roman Bold</key>
<string>C:\WINDOWS\Fonts\TIMESBD.TTF</string>
<key>Times New Roman Bold Italic</key>
<string>C:\WINDOWS\Fonts\TIMESBI.TTF</string>
<key>Times New Roman Italic</key>
<string>C:\WINDOWS\Fonts\TIMESI.TTF</string>

<key>Trebuchet MS</key>
<string>C:\WINDOWS\Fonts\trebuc.TTF</string>
<key>Trebuchet MS Bold</key>
<string>C:\WINDOWS\Fonts\trebucbd.TTF</string>
<key>Trebuchet MS Bold Italic</key>
<string>C:\WINDOWS\Fonts\trebucbi.TTF</string>
<key>Trebuchet MS Italic</key>
<string>C:\WINDOWS\Fonts\trebucit.TTF</string>

<key>Verdana</key>
<string>C:\WINDOWS\Fonts\verdana.ttf</string>
<key>Verdana Bold</key>
<string>C:\WINDOWS\Fonts\verdanab.ttf</string>
<key>Verdana Italic</key>
<string>C:\WINDOWS\Fonts\verdanai.ttf</string>
<key>Verdana Bold Italic</key>
<string>C:\WINDOWS\Fonts\verdanaz.ttf</string>

Now restart Windows and fire up Safari.

You should now have a working beta copy of Safari 3 on your Windows machine and are now in a position to check out some of those speed claims.

Remember, this is only a temporary fix so check the Apple website for updates or use the Apple Software Updater.

Most of the information for this article was gleaned from Apple discussion fora and bug reports.

You can see all the original discussions at discussions.apple.com/thread.jspa?threadID=992780&tstart=0

Kudos to critter42 for working this one out.

Make a Comment

Make A Comment: ( 2 so far )

blockquote and a tags work here.

2 Responses to “Safari 3 Text Display Problems”

RSS Feed for BlueClock Comments RSS Feed

This article was most interesting. However, I have a little different issue. Peope using Safari can only see photos and the links on my pages (no other text displays even though all text on the site is in Arial font). Should I try a different font for the entire site? If so, which one? Is it safe to download a free version of Safari so that I can view my website in this browser before publishing it? I’m having to contact someone with a Mac computer every time I try something different. I’m using Frontpage 2003 as my authoring tool for the website. Is it my responsibility or the Mac user’s responsibility to make the site readable? Do Mac’s come with both Safari and Firefox? The site is fine in Firefox, but do all Mac users know to use a different browser if the Safari doesn’t display properly?

Joyce
January 28, 2008

Hi Joyce

the text on your site displays OK in Safari on windows, but I’ll check it on a mac for you later.

In the meantime though I’ll try to answer your other questions.

Don’t change the font, as I doubt that will fix the problem.

Yes it is safe to download Safari for Windows.

It’s definitely your responsibility to make the site is readable for your users.

Macs do not come with Firefox pre-installed (only Safari) and asking someone to install a different browser on their computer just so they can view your site isn’t really a good option.

Hope that helps and I’ll contact you directly if I find what’s causing the text to disappear on the mac.

blueclock
January 29, 2008

Where's The Comment Form?

    About

    Articles To Help You Manage Your Web Site from BlueClock : Web Design, Development and Consultancy in Brussels

    RSS

    Subscribe Via RSS

    • Subscribe with Bloglines
    • Add your feed to Newsburst from CNET News.com
    • Subscribe in Google Reader
    • Add to My Yahoo!
    • Subscribe in NewsGator Online
    • The latest comments to all posts in RSS
    • Subscribe in Rojo

    Meta

Liked it here?
Why not try sites on the blogroll...