3

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?

Vibhor Dube
  • 4,173
  • 1
  • 22
  • 32

2 Answers2

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-enter image description here

  • After adding font-display: swap to the @font-face- enter image description here

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

Vibhor Dube
  • 4,173
  • 1
  • 22
  • 32
0

CSS font-display is a @font-face descriptor and not a property, so its support in the browser cannot be tested with feature queries (CSS @supports rule and CSS.supports API).

swap value Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.

You can check this link for more information.

Yudiz Solutions
  • 4,216
  • 2
  • 7
  • 21