Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
All Submissions:
Changes proposed in this Pull Request:
Adds a
newspack--font-loading
class to thebody
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:
//fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;700&display=swap
, then set "Header Font" toAnton
.newspack--font-loading h3 { letter-spacing: -1px; }
body
element has thenewspack--font-loading
class, which is then removed. Theh3
elements should match theAnton
font on load. Enable network throttling for better observation.Other information: