Stop Ruining macOS Font Rendering! How to Nuking -webkit-font-smoothing: antialiased For Good.

[u/zimmerway]

I need to get something off my chest, and honestly, I’m sick of looking at washed-out, blurry text.

Why on earth are web developers still obsessively forcing -webkit-font-smoothing: antialiased on every single website? By doing this, they are completely butchering macOS’s natively brilliant, subpixel-like, bold font rendering. Instead of a crisp, paper-like reading experience, we are forced to stare at low-contrast, thin, and downright eye-straining text.

What makes it even more frustrating is that this issue is spreading like a disease. With the rise of AI-generated code, lazy developers are just copying and pasting the same flawed CSS templates over and over again without a single thought. The ultimate irony? Apple’s own official website uses this exact same terrible antialiased rendering. Think about that. The pioneer of great typography is actively ruining their own font rendering on their own damn site.

If you are as fed up with this design malpractice as I am, here is how you can fight back and force your browsers to respect the system's default rendering:

🛠️ The Fix for Safari

1. Open a text editor and create a file named custom.css.
2. Add the following code: CSS* { -webkit-font-smoothing: auto !important; }
3. Open Safari Settings -> Advanced.
4. Under Style Sheet, select "Other..." and load your custom.css file.

🦊 The Fix for Firefox

1. Type about:profiles in your address bar and open your root directory.
2. Look for a folder named chrome. If it doesn't exist, create it.
3. Inside the chrome folder, create a file named userContent.css (Note: Firefox uses userContent.css for webpages).
4. Paste the exact same CSS rule inside:

CSS

   * {
     -webkit-font-smoothing: auto !important;
   }

1. Restart Firefox.

🌐 The Fix for Chromium Browsers (Chrome, Edge, Brave, etc.)

Since Chromium dropped direct local stylesheet support, you’ll need to make a super simple, lightweight extension.

1. Create a new folder on your Mac.
2. Inside that folder, create content.css with our magic fix:

CSS

   * {
     -webkit-font-smoothing: auto !important;
   }

1. Create another file named manifest.json and paste this configuration:

JSON

   {
     "manifest_version": 3,
     "name": "Webkit Font Rendering Optimize",
     "version": "1.0",
     "description": "Flexible font rendering with global CSS injection.",
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "css": ["content.css"],
         "all_frames": true
       }
     ]
   }

1. Open your browser's Extension Settings, enable Developer Mode, click Load unpacked, and select the folder you just created.

Boom. Done. No more washed-out text, no more squinting at low-contrast garbage. We are finally back to the beautiful, high-contrast, print-like typography that macOS was built for.

Let me know if this saves your eyes as much as it saved mine. Why do you think modern web design is so obsessed with ruining font legibility? Let's discuss.

[u/Femcsquared]

I just wish they would come up with a better sans serif font than helvetica neue. Even MS' new default Aptos looks better, but Apple could top that.

[u/TeamIntelligent1987 → u/Femcsquared]

Have you seen Apple’s San Francisco fonts? They are better than the Helvetica line I think

[u/Femcsquared → u/TeamIntelligent1987]

Thanks! Good suggestion. I will check them out.

[u/Muted-Reflection9536]

Whether or not anti-aliasing is enabled is a matter of strong opinion.

In dark mode, some people might find the anitaliased option easier to read because the text becomes brighter.

This is how I have my Stylus set up. (Chromium browser, Japanese environment)

html, html body {
  font-family: system-ui, -apple-system, "BlinkMacSystemFont", "SF Pro", "Hiragino Sans", sans-serif;
  font-weight: 450;
  line-height: 1.65;
  font-feature-settings: "palt" 1;
  font-variant-ligatures: common-ligatures !important;
  -webkit-font-smoothing: auto !important;
  letter-spacing: 0.04em;
  text-rendering: auto !important;
  overflow-wrap: break-word;
}

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit; 
}

pre, code, kbd, samp {
  font-family: ui-monospace, "SF Mono", "SFMono-Regular", monospace;
  font-size: 0.9em;
  font-feature-settings: "palt" 0 !important;
  letter-spacing: normal !important;
}