Whilst working on a client website earlier today, I came across an issue whereby fonts were not rendering consistently across different browsers. This is not normally much of a surprise, as inconsistencies between web browsers are one of the little challenges that keep us web developers on our toes. However, on this occasion the two browsers in question were Chrome and Safari – normally two of the most reliable for accurate CSS layouts.
The issue was with a handwritten typeface called Rollerscript Rough. The site was only using one weight of the font, but it appeared as though Chrome was rendering a bold version and Safari a light version. Very strange. Searching around online lead me to a blog post which detailed a CSS property that was new to me:
The two rendering options for this property are:
- -webkit-font-smoothing: subpixel-antialiased; and
- -webkit-font-smoothing: antialiased.
Testing both suggested that, by default, Chrome uses the first one and Safari uses the second – “subpixel-antialiased” renders the font slightly bolder, which was the desired effect with the font I was using. Setting this font-smoothing CSS property to the required elements resulted in consistent font rendering across both browsers.
Another useful cross-browser fix to add to my future website projects.