Mac 911

HOW TO OVERRIDE THE FONT SETTINGS IN SAFARI FOR ALL PAGES

Sometimes web page designers make interesting choices. Why not use tiny, fancy type on a shaded background to make reading a page more…legible? Apple’s built-in Reader View in Safari across all its platforms lets you make short work of hard-to-read type. But you lose most of the formatting, some of the images, and other elements of the page.

Safari for macOS has another trick up its sleeve: custom CSS. Where HTML defines the structure and content of a web page, CSS (Cascading Style Sheets) is the coding that underlies the appearance and formatting, from type sizes to columns and floating boxes. In Safari → Preferences → Advanced, you can select a custom style sheet from the Style Sheet pop-up menu.

You don’t need to know much CSS to have an impact. For example, suppose you like Arial above all other typefaces. A CSS file that contains this single line will change the typeface on all pages to Arial:

html body { font-family: Arial !important }

Decoded, that says “For an HTML page’s body section, the container for all the stuff part of the CSS name defines a hierarchy about which style characteristics to use when there are overlapping choices. The browser gets top pick and the flag says, “I don’t care what any other style sheet says—use my parameter!”