Elementor Variable Font Weight Patch
Temporary compatibility patch that outputs missing Elementor global typography font-weight CSS custom properties for presets built on registered variable-weight fonts. Works around elementor/elementor#29496 and #36009. Remove once Elementor ships an upstream fix.
Install
This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.
Install straight from GitHub with WP-CLI:
wp plugin install https://github.com/aznalfl/elementor-variable-font-weight-patch/archive/refs/heads/main.zipA temporary WordPress compatibility patch that fixes missing font-weight CSS on Elementor Global Typography presets built on registered variable-weight fonts.
The problem
Elementor's Global Fonts (Site Settings → Global Fonts) let you assign
a font-weight to each typography preset. When the assigned font is a
registered variable-weight font, Elementor adds a second "weight"
slider control for the variable font-weight axis - but due to a bug in
Elementor core, the resulting
--e-global-typography-{id}-font-weight CSS custom property (referenced
by widgets on the front end) is never actually defined anywhere.
The configured weight is saved correctly in the database and Elementor references the variable correctly - it just never defines it, so affected text silently falls back to the browser default weight.
This is tracked upstream as elementor/elementor#29496 and elementor/elementor#36009.
What this plugin does
It does not touch Elementor core. At render time, it reads the already-saved, correct values from the active Elementor Site Kit and prints the missing CSS custom properties so the browser can resolve them.
Specifically, on eligible front-end requests it:
- Fetches the active Elementor Kit for the current request.
- Reads
system_typographyandcustom_typographysettings and collects every preset with atypography_weightvalue (Elementor only populates that field for presets using a registered variable-weight font, so only affected presets are ever touched - no font list or preset-name matching required). - Sanitises each preset id and weight value.
- Emits a compact
:root { ... }block declaring both--e-global-typography-{id}-font-weight(the name Elementor's widget CSS actually references) and--e-global-typography-{id}-weight(seen in some existing manual workarounds), for drop-in compatibility with either naming convention. - Attaches that CSS as an inline style on the
elementor-frontendstylesheet, falling back to a `