CSS Font Smoothing in Webkit and Firefox
Last updated on
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
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.
See the Pen CSS – Font Smoothing by Michael Gearon (@michaelgearon) on CodePen.0
Written by
Michael Gearon
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.