Use Font Display on Adobe Fonts to improve Site Speed

Use Font Display on Adobe Fonts to improve Site Speed

Posted on: by Stephen Ainsworth

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”

Google PageSpeed Insight - Webfont Loads

Google PageSpeed Insight – 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.

MDN Web Docs

MDN Web Docs

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.

Adobe Fonts

Adobe Fonts

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.

About the Author

stephen ainsworth

Stephen Ainsworth

Stephen is a web developer who has been building websites and applications for over a decade. He continues to build projects and solutions for clients and enjoys teaching others in his field.

Follow Stephen on Socials

Share on Socials

Leave a Reply

Your email address will not be published. Required fields are marked *