Change the font in Safari

There is no preference setting or menu option available to change font style in Safari.

Most modern web sites are feeding you the font they want you to see. You can't do much about that.

Here are two ways to change Safari's fonts for all webpages:

Method One: Safari's System Preferences

1. Type your CSS code into a plain text editor such as TextEdit or TextWrangler. Save the document with a .css extension to a location of your choosing such as /Users/<username>/CSS/AppleChancery.css.

The CSS code for the Apple Chancery font:

* { font-family: inherit !important; } html { font-family: 'Apple Chancery' !important; }

2. Navigate to Safari > Preferences > Advanced > Style Sheet from Safari's menu bar and click the selection button. Select "Other..." from the pop-up menu and navigate to the location of your CSS file. Select and press the Enter key. Enjoy your new Safari font!

Method Two: Safari Extension

1. Download and install the "Stylish" extension from Apple's website or from the developer's website. Double-click on the extension from your Downloads folder and click on the "Install" button.

2. If the Stylish button labeled with an "S" isn't visible in Safari's toolbar, navigate to Safari > Preferences > Extensions from Safari's menu bar, select Stylish from the Extensions viewer and select "Enable Stylish". Click on the Stylish button in Safari's toolbar and click on the "Manage" button. A new tab or window will open to the Styles Manager.

3. Click on "Edit" from the selections pane and enter your CSS code in the "CSS:" text box. Click the "Applies to:" selection button and select "Global" from the pop-up menu. Give your style a title and click the "Save Style" button.

4. Navigate to the Stylish button in Safari's toolbar and click on it. Click on the name you gave your style and the grey selection indicator will turn green. Enjoy your font!

Fonts

You can view fonts by opening OS X's Font Book app located in the Applications folder. Once you've selected a font, use the name in your CSS code. In Font Book's font viewer, the name of the font has a disclosure triangle beside it. If you click the disclosure triangle, you'll see the font's variant type styles. The punctuation you use in your CSS code will depend upon whether the the font has more than one word in its name and whether you use a regular font or a variation. A font name with more than one word requires single or double quotes around the name in your code. if using a variation, it needs to follow and be separated by a comma:

font-family: 'Marker Felt', wide !important;

The Asterisk (*) selector in your CSS code selects all/any elements. The "!important" declaration overrides all other rules. The "inherit" keyword specifies that any child elements should inherit the value of the font-family from their parent element.

Some CSS code samples...

Make all text uppercase:

* { text-transform: uppercase; }

To transform all text to lowercase, substitute "lowercase". To transform the first character of each word to uppercase, substitute "capitalize".

Sets various font sizes for the body and headers:

* { font-size: inherit !important; line-height: inherit !important; } html { font-size: medium !important; line-height: 1.4 !important; } h1 {font-size:xx-large !important;} h2 {font-size:x-large !important;} h3 {font-size:large !important;} h4 {font-size:medium !important;}

The line-height property is a value multiplied by the element's font size. The font-size property sets the size of a font. You can set the font size by name, percent, or pixels. Named options include: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, and larger. A percent example: "font-size:50%". A pixel example: "font-size:20px". One thing to note is that not all text that appears on a webpage are fonts, some are images and won't be changed by your code.

Finding Styles And Themes For Stylish

You can find thousands of user styles through doing a search in Stylish's Styles Manager; or navigate to and click the Stylish button in Safari's toolbar. Click "Find more". You can also do a search directly from the userstyles.org website.

Apple Chancery font, and Font Size selected:

Courier font, Font Size, Lowercase, and Google Search - Material Design selected:

Google Material Design selected:

Font size is different. From Safari's "View" menu, select "Customize Toolbar..."

The resulting screen looks like this:

Note the icon I outlined in a red rectangle; drag it to Safari's toolbar and you can click the larger "A" to increase font size for better readability. Clicking the same "A" reduces the font size.