Search code examples
htmlcssbootstrap-4fontsfont-face

Font from a file doesn't work, using @font-face

This is my css, I also use Bootstrap 4.6 but that's in the html:

    @font-face{
    font-family: fipps-regular;
    src: url(../media/fonts/flipps/fipps-regular-webfont.woff2) format('woff2'),
         url(../media/fonts/flipps/fipps-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;}

    .row h1, h2{
    color: white;
    font-family: flipps-regular, Arial, Helvetica, sans-serif;}

This is my html:

<!DOCTYPE html>

<html lang="hu">

<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>Thicc Game</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="Style/style.css">
    <link rel="icon" href="Media/Images/flushed.png" type="image/icon type">

</head>

<body class="bg-dark">
    
    <div class="container-fluid">
        
        <div class="row">
            <h1 class="mx-auto">Thicc game</h1>
        </div>

        <br>

        <div class="row">
            <iframe class="mx-auto" width="712" height="400" src="https://www.youtube.com/embed/Hnifr7k2tO4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
        </div>

        <br>

        <div class="row">
            <h2 class="mx-auto">Made by Nitro-gen Studios <img class="nitrogen" src="Media/Images/nitrogen.png" alt=""></h2>
        </div>

        <br>

        <footer>
            <div class="row">
                <a href="#" class="mx-auto"><img class="googleplay" src="Media/Images/googleplay.png" alt="Get it on Google Play!"></a>
            </div>
        </footer>

    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</body>

</html>

And this is how my directories look:

[

  1. Thicc Game (Main folder)

  2. --> Javascript

  3. -->Media --> Fonts--> Flipps --> a demo html with its stylesheet, and the two font files called flipps-regular-webfont.woff/woff2

  4. --> Style --> style.css

]

1 <-- Picture of directories

The website looks like this: Wrong font

And should look something like this: Good font

This is my first time asking on StackOverFlow so some formatting looks maybe bad on this question...

Solution

  • I GOT IT!!!

    It was a typo in

    .row h1,h2{
font-family:flipps-regular, Arial, Helvetica, sans-serif;
}

    I just needed to correct it to

    .row h1,h2{
font-family:fipps-regular, Arial, Helvetica, sans-serif;
}

    Thanks for the replies :D