CSS Font Smoothing in Webkit and Firefox

Michael Gearon

Last updated on September 1, 2020

Using font smoothing can turn a horrible typeface to a beautiful one. The Webkit and Firefox browsers make the fonts look slightly thicker, using just two lines of CSS we can solve this problem.

Syntax

The default value for -moz-osx-font-smoothing is auto. This will work in Firefox using the -moz- prefix, and for it work in Opera, Safari and Chrome use the -webkit- prefix. This is not supported in any version of Internet Explorer or Edge.


body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Default: auto */
}

Example of font smoothing in CSS

Static Example

The top version is antialiased, whilst the bottom is not.

Live Example

To view the live version of this please click on ‘edit on CodePen’ thanks @smfr for mentioning this.
[codepen_embed height=”780″ theme_id=”0″ slug_hash=”ZWbVgM” default_tab=”result” user=”michaelgearon”]See the Pen CSS – Font Smoothing by Michael Gearon (@michaelgearon) on CodePen.[/codepen_embed]

Written by