Masteriyo – eigene Fonts auf der Lernseite mit Inline CSS

PHP
<?php
add_action("wp_head", function () {
    global $post;
    
    // Page ID der Lernseite 49475 sind
    if (!isset($post->ID) || $post->ID != 49475) {
        return;
    }
    ?>
    <style id="masteriyo-inline-css">
    /* Noir Pro Font Faces */
    @font-face {
        font-family: 'Noir Pro';
        src: url('https://younique-onlinekurs.com/wp-content/uploads/NoirPro-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Noir Pro';
        src: url('https://younique-onlinekurs.com/wp-content/uploads/NoirPro-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Noir Pro';
        src: url('https://younique-onlinekurs.com/wp-content/uploads/NoirPro-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    
    /* Kadence Base CSS Variables */
    :root{--noir-pro-font:'Noir Pro', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
    </style>
    <?php
}, 999999);
SCSS
#masteriyo-interactive-course
    .chakra-container
    .chakra-stack
    h5.chakra-heading {
    color: red !important;
            font-weight: 500 !important;
        font-family: var(--noir-pro-font) !important;
}

#masteriyo-interactive-course
    .chakra-container
    .chakra-stack
    .chakra-text.masteriyo-assignment-description {
    color: blue !important;

    p {
        color: green !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
        font-weight: 400 !important;
        font-family: var(--noir-pro-font) !important;
        max-width: 740px !important;

        strong {
            font-weight: 500 !important;
        }
    }

    ul {
        padding-left: 25px !important;
        padding-bottom: 15px !important;
        font-family: var(--noir-pro-font) !important;
        li {
            color: orange !important;
            max-width: 740px !important;

        }
    }
    h2 {
        color: violet;
        font-weight: 500;
        font-family: var(--noir-pro-font) !important;
        font-size: 1.125rem !important;
    }
}