elementor
⌛ 🔗 Variable font weight doesn't seem to be working on global typografies.
Prerequisites
- [X] I have searched for similar issues in open and closed tickets and cannot find a duplicate.
- [X] I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.
Description
When I add a variable font in custom fonts, and use that font in global fonts (ie primary, secondary and customs) I can set the weight between the values selected when uploading the custom font. This however is not applied in the frontend when using the global typografies set up. If you then switch from the global typografi to custom, the font-weight is working fine.
Example on and elements style would be
.elementor-21357 .elementor-element.elementor-element-3958d1c .elementor-heading-title {
font-family: var(--e-global-typography-1a0e6f3-font-family), Sans-serif;
font-size: var(--e-global-typography-1a0e6f3-font-size);
line-height: var(--e-global-typography-1a0e6f3-line-height);
}
And as you can see, the weight is not defined.
Steps to reproduce
Download a variable google font with weight like https://fonts.google.com/specimen/Wix+Madefor+Display Upload it as a custom font and set the weight values "from 400" and "to 800" Go into global settings and add several custom typografy sizes with the font and different weights.
Try to use them on a page.
Expected behavior
I love the fluidness of variable fonts. And I would expects it to work with global settings as well on widget level.
Isolating the problem
- [ ] This bug happens when only the Elementor (and Elementor Pro) plugins are active.
- [X] This bug happens with the Hello Elementor theme active.
- [X] I can reproduce this bug consistently by following the steps I described above.
Elementor System Info
Click to reveal
== Server Environment ==
Operating System: Linux
Software: Apache
MySQL version: MySQL Community Server - GPL v8.0.39
PHP Version: 7.4.33
PHP Memory Limit: 1024M
PHP Max Input Vars: 20000
PHP Max Post Size: 512M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected
== WordPress Environment ==
Version: 6.7.1
Home URL: xx
WP Multisite: No
Max Upload Size: 512 MB
Memory limit: 1024M
Max Memory limit: 1024M
Permalink Structure: /%postname%/
Language: da_DK
Timezone: Europe/Copenhagen
Debug Mode: Inactive
== Theme ==
Name: Hello Elementor Child
Version: 2.0.0
Author: Elementor Team
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 3.1.1
Parent Theme Author: Elementor Team
== User ==
Role: administrator
WP Profile lang: da-DK
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
== Active Plugins ==
Elementor
Version: 3.25.10
Author: Elementor.com
Elementor Pro
Version: 3.25.4
Author: Elementor.com
GTM4WP - A Google Tag Manager (GTM) plugin for WordPress
Version: 1.20.2
Author: Thomas Geiger
JetElements For Elementor
Version: 2.7.1.1
Author: Crocoblock
JetEngine
Version: 3.6.0.1
Author: Crocoblock
JetEngine - dynamic tables builder
Version: 1.0.11
Author: Crocoblock
JetThemeCore
Version: 2.2.2.1
Author: Crocoblock
JetTricks
Version: 1.4.10
Author: Crocoblock
PixelYourSite
Version: 10.0.1.2
Author: PixelYourSite
Regenerate Thumbnails
Version: 3.1.6
Author: Alex Mills (Viper007Bond)
UpdraftPlus - Backup/Restore
Version: 1.24.11
Author: TeamUpdraft, DavidAnderson
Yoast Duplicate Post
Version: 4.5
Author: Enrico Battocchi & Team Yoast
Yoast SEO
Version: 23.9
Author: Team Yoast
== Elements Usage ==
archive : 3
button : 1
container : 12
divider : 1
form : 1
heading : 7
loop-grid : 2
text-editor : 3
container : 10
button : 1
container : 47
heading : 19
image : 1
jet-button : 18
text-editor : 1
footer : 1
container : 8
heading : 5
icon-list : 5
image : 1
text-editor : 1
header : 1
button : 1
container : 13
heading : 3
icon-list : 5
image : 1
jet-button : 3
mega-menu : 1
nested-accordion : 2
page : 3
button : 1
container : 41
heading : 19
image : 6
jet-button : 10
social-icons : 1
text-editor : 8
popup : 2
container : 4
image : 3
nested-carousel : 1
wp-post : 0
container : 82
form : 4
heading : 32
icon : 3
icon-box : 16
image : 12
image-carousel : 3
loop-carousel : 3
nested-carousel : 4
off-canvas : 3
testimonial : 4
text-editor : 20
wp-page : 35
button : 58
container : 1039
divider : 2
form : 4
heading : 535
hotspot : 1
html : 1
icon : 1
icon-box : 8
icon-list : 8
image : 67
image-carousel : 2
jet-button : 182
jet-headline : 9
jet-horizontal-timeline : 2
jet-price-list : 6
jet-testimonials : 12
jet-timeline : 5
loop-carousel : 9
loop-grid : 1
menu-anchor : 1
nested-accordion : 9
nested-carousel : 4
off-canvas : 2
social-icons : 21
spacer : 8
testimonial : 5
text-editor : 285
single-post : 2
container : 4
heading : 2
post-navigation : 1
theme-post-content : 1
loop-item : 2
container : 10
heading : 5
icon : 1
jet-button : 1
jet-price-list : 1
spacer : 1
text-editor : 1
theme-post-excerpt : 1
theme-post-featured-image : 1
theme-post-title : 1
jet-listing-items : 0
container : 5
heading : 3
jet-button : 1
jet-price-list : 1
spacer : 1
text-editor : 1
error-404 : 1
button : 1
container : 2
heading : 2
text-editor : 1
== Indstillinger ==
cpt_support: post, page, cases
allow_tracking: yes
unfiltered_files_upload: 1
font_display: swap
load_fa4_shim: yes
== Funktioner ==
Custom Fonts: 2
Custom Icons: 0
== Integrationer ==
google_maps: Aktiv
== Elementor Experiments ==
Forbedret indlæsning af CSS ressourcer: Inaktiv som standard
Inline Font Icons: Aktiv som standard
Additional Custom Breakpoints: Aktiv som standard
Container: Aktiv som standard
Upgrade Swiper Library: Aktiv som standard
Nested Elements Performance: Aktiv som standard
Optimized Control Loading: Aktiv
Optimized Markup: Inaktiv som standard
Conditionally load Swiper CSS files: Inaktiv som standard
Plugin Onboarding: Aktiv som standard
CSS Smooth Scroll: Aktiv som standard
Default to New Theme Builder: Aktiv som standard
Header & Footer: Aktiv som standard
Elementor Home Screen: Aktiv som standard
Landingsside: Aktiv som standard
Nested Elements: Aktiv
Editor Top Bar: Aktiv som standard
Pages Panel: Inaktiv som standard
Element Caching: Aktiv
Link In Bio: Aktiv som standard
Floating Buttons: Aktiv som standard
Elementor Editor Events: Inaktiv som standard
Atomic Widgets: Inaktiv som standard
Launchpad Checklist: Inaktiv som standard
Menu: Aktiv
== Elementor - Compatibility Tag ==
Elementor Pro: Kompatibilitet ikke specificeret
JetElements For Elementor: Kompatibilitet ikke specificeret
== Elementor Pro - Compatibility Tag ==
Agreement
- [X] I agree that my issue may be closed without action if it doesn't meet all the requirements.
+1 It appears the new variable fonts aren't creating a proper variable when fonts are set up under "Global Fonts". The font weight isn't variablized so the site falls back to the Hello theme font weights.
Hello @StenderIternum!
Thank you for submitting your issue! 🙏
Please allow us some time to investigate it, and get back to you with our findings. 🧐
Best regards
Same issue here, i wish i found this three days ago :(
Latest versions of Hello Theme and Elementor Pro.
I’ve encountered the same issue with variable fonts in Elementor. When a variable font is uploaded via Elementor > Custom Fonts and assigned through Global Fonts, the font weights render correctly in the editor but default to "Normal" weight on the frontend. CSS inspection shows that font-weight is not defined, and font-variation-settings is missing in the generated CSS.
I’ve tested this on multiple sites, including a clean installation, and the issue persists even with proper font setup (e.g., Min Weight = 100, Max Weight = 900). Elementor settings like "Disable Default Fonts" and "Disable Google Fonts" are enabled, and caches have been cleared.
This seems to be a systemic issue with how Elementor handles variable fonts in its Global Fonts system. Thank you to those who have already flagged this—hopefully, a fix can be implemented soon.
Still experiencing this issue, the font weight variable is undefined on variable fonts from the global fonts.
Same problem https://wordpress.org/support/topic/incorrect-handling-of-variable-font-weight-in-site-settings-global-fonts/#post-18383805
I remember reaching out to support about this issue half a year ago. They said it was a work in progress and would be fixed soon. That was right after the version introducing this feature. I guess, it's still work in progress. I can’t create reusable fonts due to this issue, so for me, this variable fonts feature might as well not exist.
I have same problem. Any news about this?
Haven't checked recently, but I assume they still haven't fixed it. Pray for a miracle
Simply go the 'old way' and waste no time, that's my suggestion
Same problem here... 5 months after OP raised this issue. Apparently this is difficult for the Elementor developers to fix.
However no need to revert back to static fonts. Simply define the variable yourself since Elementor can't figure out how to do it.
Same problem here... 5 months after OP raised this issue. Apparently this is difficult for the Elementor developers to fix.
However no need to revert back to static fonts. Simply define the variable yourself since Elementor can't figure out how to do it.
I tested this recently and, at least for me, it didn't work. With this font weight problem, the variable is not even considered in CSS (it is not created or defined).
Same problem here... 5 months after OP raised this issue. Apparently this is difficult for the Elementor developers to fix. However no need to revert back to static fonts. Simply define the variable yourself since Elementor can't figure out how to do it.
I tested this recently and, at least for me, it didn't work. With this font weight problem, the variable is not even considered in CSS (it is not created or defined).
I added this (for example) to my custom css and it worked fine. Adjust as needed to target your variable names:
:root {
--e-global-typography-primary-font-weight:700;
--e-global-typography-secondary-font-weight: 800;
}
Why this is necessary is beyond me.
Disabling this in Elementor's features resolves the issue.
Load Google Fonts Locally: Inactive To improve page load performance and user privacy, replace Google Fonts CDN links with self-hosted font files. This approach downloads and serves font files directly from your server, eliminating external requests to Google's servers.
Disabling this in Elementor's features resolves the issue.
Load Google Fonts Locally: Inactive To improve page load performance and user privacy, replace Google Fonts CDN links with self-hosted font files. This approach downloads and serves font files directly from your server, eliminating external requests to Google's servers.
Can you elaborate on that, please?
Disabling this in Elementor's features resolves the issue.
Load Google Fonts Locally: Inactive To improve page load performance and user privacy, replace Google Fonts CDN links with self-hosted font files. This approach downloads and serves font files directly from your server, eliminating external requests to Google's servers.
Even if that had something to do with the CSS generated in global fonts, Elementor has removed the ability to load Google Fonts from anything but locally.