How to test 'font-display: swap' on your local machine?

Question

To overcome invisible text, PageSpeed Insights suggested using the fallback font for the whole application using font-display: swap in the @font-face declaration. I have added the property to each of the @font-face of my web application, but am unable to test it as the changes are still on my local machine.

So, now how do I test font-display: swap on my local machine and make sure it works and probably capture some screenshot or have a document supporting it?

Answer 1

I've used Lighthouse which is built-in to achieve this. This is the best you can do to test the same on local as far as I know. Check the screenshots below-

• Before adding font-display: swap to the @font-face-

• After adding font-display: swap to the @font-face-

Reference: Can I use pagespeed insights for my local host website or offline?