Need help for applying simple font-style

[Praveen]

I've used some google fonts, let me show you some

 <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

As you can see I've tried to link two fonts which are "Sofia Sans Semi Condensed" and "Inter"
And I saved it in my css root variables like this

:root{
    --paragraph-font: 'Inter', sans-serif;
    --heading-font:  'Sofia Sans Semi Condensed', sans-serif;
}

I"m trying to apply the font in navbar with a list like this and also in nav-logo-text

    <nav>
    <div class="logo-section">
        <div class="nav-logo">
            <img src="./assets/asset 1.png" alt="" srcset="">
        </div>
        <div class="nav-logo-bubble">
            <div class="nav-logo-text">
                Become a tester
            </div>
        </div>
    </div>
    <ul>
        <li><a href="#">Product</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Sign in</a></li>
        <li><a href="#">Sign up</a></li>
    </ul>
    



    </nav>

and to target them with css, I used this code below!

.nav-logo-text{
    color: #183b56;
    font-style: var(--heading-font);
    text-align: center;
    padding: 13px;
}


nav ul{
    display: flex;
    gap: 1.2rem;
    font-style: var(--heading-font);

}

But neither nav ul font's changing neither nav-logo-text
when I try inspect in firefox, it says invalid property

 

[menator01]

I changed this font-style: var(--heading-font); to font-family: var(--heading-font); and it changed the font
font-style - CSS: Cascading Style Sheets | MDN

 

[Praveen]

I changed this font-style: var(--heading-font); to font-family: var(--heading-font); and it changed the font
font-style - CSS: Cascading Style Sheets | MDN

Thanks! you're a life saver!

 

[menator01]

Glad I could help