Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add font-loading class #2418

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Conversation

adekbadek
Copy link
Member

All Submissions:

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?

@adekbadek adekbadek added [Status] Needs Review The issue or pull request needs to be reviewed Performance labels Nov 29, 2024
@adekbadek adekbadek requested a review from a team as a code owner November 29, 2024 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Performance [Status] Needs Review The issue or pull request needs to be reviewed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant