Async Cloud Typography

The recent update to Lighthouse 6 tightened up a little more on requests, which reduced my overall score. I recently changed over to using fonts from Hoefler & Co., using Sentinel right here in these words. Unfortunately, the webfont option from typography.com is handled via a CSS file instead of JS, which means that you can’t make the request async without a little trickery.

Luckily, I found Making Cloud.typography Fast(er), which includes a fix from the folks over at Filament Group.

<link rel="stylesheet" href="https://cloud.typography.com/[number]/[number]/css/fonts.css" media="print" onload="this.media='all'" />

Before

Mobile Screenshot of Lighthouse performance score of 95

Desktop Screenshot of Lighthouse performance score of 97

After

Mobile Screenshot of Lighthouse performance score of 100

Desktop Screenshot of Lighthouse performance score of 99

Check out
Front-end conf
we're bringing the conf back in April 2024!
10 speakers across two days, with plenty
of time for conversations