Use Font Display on Adobe Fonts to improve Site Speed

If you are like me and are looking to get the perfect score on Google PageSpeed Insights you might hit an issue with your Adobe Fonts, luckily this issue has been recently solved and will help you get those perfect scores

The issue occurred when I was getting a score of 98% with Google PageSpeed Insights flagging “All text remains visible during webfont loads”

But what does this mean?

By default, a website will fully load the font type before we visually see the page. So we get a slight delay while the assets are loaded, this is true for custom web fonts. Every second counts in terms of page speed and Google suggest loading in the fonts AFTER the page is loading producing slightly better speed performance.

How can I fix this

The natural way would be to use the font-display descripter with the value swap on the body tag of your CSS, however, if like Google Fonts and Adobe Fonts your fonts are loading in from an external source this can be an issue.

After quite a lot of requests and quite a lot of time Adobe has now applied this functionality to the Web Fonts dashboard as a setting. In your Web Projects edit the project and in the bottom right-hand corner, they have added this setting. Selecting ‘swap’ will add the ‘font-display: swap’ descripter to the external script which will fix the issue and improve your page speed as well as your PageSpeed Insights score.

For Google Fonts just add the display=swap parameter to your link.

You will notice a system font load in first and then moments later the custom font loads in. Some people won’t like this, so I guess with most things it’s a balance between speed and design/usability.