How to test 'font-display: swap' on your local machine?
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?
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: swapto the@font-face-
After adding
font-display: swapto the@font-face-
Reference: Can I use pagespeed insights for my local host website or offline?
- Setting the background of an input element as a combination of three colors
- jQuery button click not showing/hiding content
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to find my images in my folders using the picture element in HTML?
- How to Position an Image on Different Sides of a Container Using CSS?
- How remove border around image in css?
- HTML canvas not drawing image
- Show a message if a text is copied successfully(alternative to alert)
- Should I use the .htm or .html file extension? Which one is correct?
- TailwindCSS: SVG icon won't resize properly
- Float CSS attribute causing parent div not to inherit height?
- Save canvas in grayscale
- svg path not drawing for single point on chrome surface
- Any Way to Reduce File Size Using wkhtmltopdf?
- How to load a gzip compressed javascript without a webserver?
- How simulate CTRL+V keystrokes (paste) using C#
- How to get the value of a selected radio button
- Show text outside the div with clip-path
- Flask/Jinja content not centering
- How to create a scalable document element inside a container in HTML
- Custom directive and [ngClass] on same element does not work
- How can mock a component child to test the parent standalone component in Angular
- How to add Font Awesome icon into <input> button?
- I can't set text after modifying the text
- Change / Hack style of Facebook 'Like it' button
- Selector :last-child not working as expected?
- Convert an array of objects into an unordered HTML list with nested list items
- Why does this strange space start appearing at the bottom of the page only on mobile?