feat: add font-loading class

[adekbadek]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds a newspack--font-loading class to the body element until custom fonts are loaded. This will a enable font-loading-related performance improvement.

Let's say a site is using a thick font for headings. In order to prevent layout shift on font load, the fallback font can be styled to match the thickness (e.g. by setting letter-spacing to something wide). On font load, the body class will be removed, and the custom font displayed as expected.

How to test the changes in this Pull Request:

1. In Customizer -> Typography, set "Font Provider Import Code or URL" to e.g. //fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;700&display=swap, then set "Header Font" to Anton
2. In Customizer -> Custom CSS, add e.g. .newspack--font-loading h3 { letter-spacing: -1px; }
3. Load the page, observe initially the body element has the newspack--font-loading class, which is then removed. The h3 elements should match the Anton font on load. Enable network throttling for better observation.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[laurelfulford]

Apologies for missing this one entirely! This works as described, and is a really nice addition for the more dramatic font widths 🙂 Approving & merging!

[github-actions]

Hey @adekbadek, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[matticbot]

🎉 This PR is included in version 2.5.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 2.5.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀