Safari – How to Change Default Font Size in Safari Using JavaScript

fontmacossafari

I like to decrease the zoom and the font size of Safari for a better overview, I know I can set a default zoom value, but can I set a default font size?

I'm using JavaScript at the moment but I have to do that to each tab.

javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s+=2;p[i].style.fontSize=s+"px"}

Best Answer

Your question doesn't provide a lot of detail, and it's also a little ambiguous (hence the comments you're getting).

Here is an answer assuming you're wanting to do this for your own personal web browsing, rather than as a web developer. This answer also assumes you're trying to only reduce the font size rather than the whole page.

Since there's no way to do this through Safari's preferences, you have two options open to you:

  1. Using a custom style sheet
  2. Installing an extension

Style sheet

If you know how to create your own style sheet, then follow these steps:

  1. Create a style sheet to set your font properties
  2. Go to the Safari > Preferences menu
  3. Select the Advanced tab
  4. In the Style Sheet drop-down menu, select Other...
  5. Navigate to your style sheet and select it
  6. Exit the Safari preferences.

Extension

There are probably many extensions that will achieve what you want. Here are the steps for one that I'm aware of:

  1. Go to: https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45
  2. Install the Stylish extension
  3. Restart Safari
  4. Take note that to the left of the address bar you should now see the Stylish S button
  5. Go to: https://userstyles.org/styles/68263/global-font-size
  6. Click on the Install with Stylish button
  7. You've now installed this style

Now, if you need to customise this style, do the following:

  1. click on the Stylish S button I referred to at Step 4 above.
  2. Click on Manage
  3. Under the Global Font Size option click on Edit
  4. This displays the CSS code for this style. Edit it as you need.
  5. Save your changes

Hope this helps.

If I've misunderstood your question, please clarify it.

Related Question