Variable @font-face without font-weight projects to a 400-only theme.json face, so headings render lighter

Open Beginner friendly
  • Is something wrong?
#4,621 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
php, wordpress
Domain
backend

Research direction

Read php-transformer/src/WordPressSitePlan/ThemeJsonProjection.php, especially the @font-face to fontFace projection, and find the existing font-face projection tests. Add the neutral fixture with one face missing font-weight and one declaring 700; done means the projected values are "auto" and "700" respectively and the existing tests pass.

Written by the indexing model from the issue text.

Description

Finding

Source: https://adriarenas.figma.site/ (Static Site Importer 1.33.367, Data Liberation Agent 0.33.137, WordPress 7.1.4)

Display headings render lighter in WordPress than in the source, even though both compute to font-weight: 800.

The source declares its variable font without a font-weight descriptor:

@font-face { font-family: "Display"; font-style: normal; src: url(var.woff2); }
h1 { font-family: "Display"; font-weight: 800; }

An absent descriptor means auto, so the face covers the font's own wght axis (200–800 here) and font-weight: 800 selects the 800 instance.

ThemeJsonProjection copies the face into theme.json without fontWeight. WordPress WP_Font_Face fills in font-weight: 400 when the key is missing ($font_face_property_defaults), so the printed face is declared as weight 400 only. The browser then clamps the variable axis to 400.

Chromium measurements with the same font file and text set at font-weight:800:

@font-face font-weight rendered width
(absent) 437.6px
auto 437.6px
200 800 437.6px
400 (what WordPress prints) 416.2px

Owning layer

php-transformer/src/WordPressSitePlan/ThemeJsonProjection.php, in the @font-face to fontFace projection: if (null !== $weight) $face['fontWeight'] = $weight;.

Desired result

A source @font-face without font-weight projects to a theme.json fontFace that keeps the CSS default (fontWeight: "auto"). WordPress prints it verbatim, because WP_Font_Face only requires a string. Faces that declare a weight keep it unchanged.

Acceptance

  • A neutral fixture: one @font-face without font-weight and one with font-weight: 700. The projected fontFace entries are auto and 700 respectively. The test fails on trunk.
  • Existing font-face projection tests pass.

AI disclosure: investigated and drafted by Claude (Anthropic) running in the Pi coding agent for @chubes4, from a Studio import of the source above; measurements were taken with Playwright/Chromium.

Dominant language
PHP
Stars
25
Forks
3
Avg merge
3h 25m
Merged PRs (30d)
935

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blocks-engine

All issues in Automattic/blocks-engine

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.