Font Variant outputs invalid property value (typography field)

[fakrulislam]

Issue description:

The font variant is outputting invalid property value . See screenshot: prntscr . Italic values are not working ( prntscr ) but others are fine. The regular property also returning invalid property value. But if I replace normal with the regular property it works fine.

Version used:

(Did you try using the develop branch from github? There's a chance your issue has already been adressed there)
2.3.5

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

    Kirki::add_field( 'tcsupport_config', array(
        'type'        => 'typography',
        'settings'    => 'tcsupport_title_area_text_font_option',
        'label'       => __( 'Select title font', 'tcsupport' ),    
        'section'     => 'tcsupport_blog_archive_section',
        'default'     => array(
            'font-family'    => 'Open Sans',
            'variant'        => '700',
            'font-size'      => '55px',
            'subsets'        => array( 'latin-ext' ),
            'text-transform' => 'none',
            'color'          => '#ffffff',
            'line-height'    => '1.2',
        ),
        'priority'    => 10,
        'output'      => array(
            array(
                'element' => '#tc-subhead .tc-subhead-area .tc-subhead-inner h1',
            ),
        ),
        'active_callback'    => array(
            array(
                'setting'  => 'tcsupport_title_area_option',
                'operator' => '==',
                'value'    => '1',
            ),
        ),      
    ) );

[fakrulislam]

How can we separate these two properties (font-weight & font-style) from the variant value. As you can see in this screenshot both values are coming from the variant property together.

Used Code in frontend:

if( isset( $title_area_font['variant'] ) ){ 
    $title_area_font_variant        = 'font-weight:' . esc_html( $title_area_font['variant'] );
 }

Thanks for you help. highly appreciated.

[aristath]

Hey there!

This shouldn't be happening in the frontend...
If you're using the output argument of the field everything should be fine unless you override the automatically-generated CSS with your own custom functions...
The part that takes care of variants in Kirki is here: https://github.com/aristath/kirki/blob/2.3.5/includes/output/field/class-kirki-output-field-typography.php#L44-L56

[fakrulislam]

I didn't wrote any custom functions. Just registered the typography field ( like above code) & injected the output in wp_head action using the code below.

if( isset( $title_area_font['variant'] ) ){ 
    $title_area_font_variant  = 'font-weight:' . esc_html( $title_area_font['variant'] );
 }

As you can see Im printing the value in font-weight property. Can't find how to separate these two property from the variant. Note that: in the customizer preview the variant shows font-weight & font-style separately which is actually I am trying to achieve for the frontend. Do you have any idea how I can get this? Thank You.

[aristath]

Doing some cleaning-up in the issues queue and I saw I dropped the ball on this one..
Did you manage to figure this one out?

[aristath]

Version 3.0 works fine so I'm closing this one.