Custom typography in Elementor and SCSS with migrations

this will be a long one.

Recently we've created a WordPress site with Elementor. We will be writing custom widgets for clients and letting them customize them. I am responsible for creating custom typography. I need to create something for developers and clients. So I come up with migrations that insert custom typo into Elementor via Kits.

Here is a code (It's long so I figure to copy Pastebin link):

Pastebin

We are using composer for migrations. It creates classes and adds typography into elementor itself.

For visibility in code I created a function in 'wp_head' to let elementor know about the classes:

add_action(
'wp_head',
static function () {
    $active_kit_id   = get_option( \Elementor\Core\Kits\Manager::OPTION_ACTIVE );
    $active_kit_data = get_post_meta( $active_kit_id, \Elementor\Core\Base\Document::PAGE_META_KEY, true );

    $typography = ! empty( $active_kit_data['custom_typography'] ) && is_array( $active_kit_data['custom_typography'] )
        ? $active_kit_data['custom_typography']
        : [];
    ?>

    <style id="fr-typography-classes">
        <?php foreach ( $typography as $item ) : ?>

        <?php
        $str =  $item['_id'];

        $int = (int) filter_var($str, FILTER_SANITIZE_NUMBER_INT);
        echo 'h' . ($int*-1) . ',';
        ?>
        .fr-<?php echo esc_attr( $item['_id'] ); ?> {
            font-weight: <?php echo esc_attr( $item['typography_font_weight'] ); ?>;
            font-size: <?php echo esc_attr( implode( array_reverse( $item['typography_font_size'] ) ) ); ?>;
            line-height: <?php echo esc_attr( $item['typography_line_height']['size'] ); ?>;
        }

        <?php endforeach; ?>
    </style>
    <?php
}, 1000
);

add_filter( 'elementor/fonts/additional_fonts', static function ( $additional_fonts ) 
{
return [
    'sofia-pro' => \Elementor\Fonts::SYSTEM,
];
} );

On the backend the font-family and font-size work fine but after previewing the website I am getting different values:

Even if I chose in the element typography "heading-1" I am still getting properties for markup not chosen typography. In example above I want to choose markup "h2" but leave our typography from Heading-1. Is there somehow hidden option to overwrite that? Thank You in advance for any kind of direction.