Font Face is not working except on Chrome

I use Lufga font for my web app but the font isn't working on Safari or Firefox. I've tried to use @font-face but it doesn’t seem to work, the text is still rendering in a default font.

for context, I use Django on VS Code if it's relevant. this project is in development, not production.

Here's my styles.css (P.S. when I cmd+click on the URL link I do end up in the right file, so I guess the location is good)

@font-face{
    font-family: 'Lufga';
    src: url("../styles/Lufga-Regular.otf") format("Regular");
    font-style: normal;
    font-weight: normal;
}

.Logo
{
    position: absolute;
    width: 519.61px;
    height: 135px;
    left: calc(50% - 519.61px/2 + 0.3px);
    top: calc(50% - 135px/2 - 60px);
    
}

.ComingSoon
{
    position: absolute;
    left: 38.59%;
    right: 38.59%;
    top: 51.88%;
    bottom: 44.78%;

    font-family: 'Lufga';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    /* or 117% */

    text-align: center;

    color: #FFFFFF;
}


.Inquiries
{
    position: absolute;
    width: 487px;
    height: 36px;
    left: calc(50% - 487px/2 + 0.5px);
    top: calc(50% - 36px/2 + 320px);

    font-family: 'Lufga';
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    /* or 156% */

    text-align: center;

    color: #FFFFFF;
}

.EmailLink
{
    font-family: 'Lufga';
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF; 
}

and here's my homepage.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXX</title>
    <link rel="icon" type="image/png" href="{% static '/favicon.png' %}"/>
    <link rel="stylesheet" href="{%  static  'css/style.css'  %}">
</head>

<body>
    <div class="BackgroundShapes">
        <img src="{% static '/Background Shapes.svg' %}" alt="BackgroundShapes Not loading2">
    </div>
        <div class="Elements">
            <div class="Content">
                <nav>
                    <ul class="DocumentContent">
                        <div class="Logo">
                            <img src="{% static '/Logo.svg' %}" alt="logo not loading">
                        </div>
                        <div class="ComingSoon">
                            <p>Coming Soon...</p>
                        </div>

                            <div class="SocialMediaLogos">
                                <a class="LinkedinLogo" href="#">
                                    <img src="{% static '/Logo Linkedin.svg' %}" alt="logo not loading">
                                </a>

                                <a class="TwitterLogo" href="#">
                                    <img src="{% static '/Logo Twitter.svg' %}" alt="logo not loading">
                                </a>

                                <a class="SnapchatLogo" href="#">
                                    <img src="{% static '/Logo Snapchat.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="InstagramLogo" href="#">
                                    <img src="{% static '/Logo Instagram.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="FacebookLogo" href="#">
                                    <img src="{% static '/Logo Facebook.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="TikTokLogo" href="#">
                                    <img src="{% static '/Logo Tik Tok.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="GithubLogo" href="#">
                                    <img src="{% static '/Logo Github.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="YoutubeLogo" href="#">
                                    <img src="{% static '/Logo Youtube.svg' %}" alt="logo not loading">
                                </a>
                            </div>

                        <div class="Inquiries">
                            <p>For any inquiries, please contact <a class="EmailLink" href="mailto: [email protected]">[email protected]</a></p>
                        </div>

                    </ul>
                </nav>
            </div>
        </div>
    
</body>
</html>

thanks in advance for any help

Solution

Try having to format as opentype. Your using an Open Type font so you need to specify which format to use.

@font-face{
    font-family: 'Lufga';
    src: url("../styles/Lufga-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}