elementor ⌛ 🔗 Variable font weight doesn't seem to be working on global typografies.

⌛ 🔗 Variable font weight doesn't seem to be working on global typografies.

Open StenderIternum opened this issue 11 months ago • 26 comments

trafficstars

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.

Dec 04 '24 12:12 StenderIternum