Fix blurry fonts in Safari

Many of the latest browser versions have decided to implement some funky dropshadow styling which makes editor fonts go a little crazy. Here is a quick fix to get you back to being productive in the cloud.

I work on a Mac and primarily use Safari for browsing the web. If you are like me and typically accept the automatic updates to software you may have noticed when you updated to Safari 5 editing code in the online editor within Salesforce became a real eye strain. Not sure what I am talking about, here is a 'before' picture.


The reason for the funky fonts is due to some 'default styling' Safari and Internet Explorer decided to add. I often use the online editor for code changes, demos etc as i am sure many other developers do. Although this really isn't a tip, I wanted to share it here as I am sure others are (or were faced) with the same issue. Thankfully the solution is very simple. I will use Safari as the example but I suspect the fix for internet explorer will be similar. (although I haven't tried it, sorry). The fix is a quick two step process:

1. Open your favorite text editor and create a stylesheet with the following style. I named my stylesheet user.css (Here's my version if you don't want to type)

#editor #textarea { 

    margin: 0 !important;

    white-space: pre !important;

    word-wrap: normal !important;


2. From within your browser, (remember I am using Safari) go to Preferences–>Advanced, and select your newly created stylesheet. 


That's it. Problem solved. Note: I checked Winter '11 and it appears that the blurry fonts are no longer present. It may be my browser, or some caching magic. If anyone else can confirm, please leave a comment below.



Leave your comments...

Fix blurry fonts in Safari