Is there a way to change the typeface used in Safari's "Reader" mode?

The typeface used in Safari's "Reader" mode (on both iOS and OS X) seems to be some form of Palatino, which, while certainly not the worst screen face, isn't the best either. This used to be a limitation in iBooks as well, until the addition of excellent screen faces like Charter and Athelas.

Is there a way to change the typeface used by Safari's Reader mode?


The easy way is to click on the "Aa" on the right side of address window once you are in reader mode already, and choose font and background colors :)

screenshot of the "AA" button in Safari browser address bar in Sierra


On my system (Yosemite 10.10.5), I've noticed that changing Reader.html styles gives no effect. I've inspected the Reader code throug Safari and found that the the only CSS that is linked with Reader is ResourcesWBSReaderSharedStyleSheet.css.

enter image description here

Here is the path to Reader CSS file: /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources/WBSReaderSharedStyleSheet.css

I've successfully customized the CSS and reached another level of happiness.

Update: In El Capitan, unfortunately, this trick does not work. It seems like the WBSReaderSharedStyleSheet.css is not used anymore, all the settings are settled in Reader.html, but changing the CSS settings in the file does not affect on the final look.


I've never tried it, but apparently you can modify the file: Safari.app/Contents/Resources/Reader.html

From an Apple community support page:

Do a right-click on the application Safari and choose +Show Package Contents+. An new finder window will open. There is one folder in there named Contents. Contents includes several files and folders, navigate to see the content of the folder Resources until you find a file named Reader.html. This is the file you want to edit. Most probably you will not have the rights to do so. Depending on your choice of text editor, you are asked for a admin password when opening the file or when you try to save it. I use the nice TextWrangler from BareBones and it opens the file without asking (it will do so later in the process).

Now edit the CSS to your liking and save the file.

Open Safari and check out how it looks.

And one more thing: With the next update of Safari your changes in Reader.html will most likely be overwritten. So you might want to keep a version of Reader.html at another location outside the application package Safari to re-implement your changes.

As always, proceed with caution when modifying default applications and have backups of both any edited files as well as your important data.


New new location of Reader.html is at

/System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources

if you're not sure, just use locate