How to use installed font in my project?

I was trying a bunch of things, for some reason the installed font is not being used and the default Calibri is used instead.

My css folder:


Here is my test.css file

@font-face {
  font-family: "granitnormal";
  src: url("granit-webfont.woff2") format("woff2"),
    url("granit-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
.test {
  font-family: "granitnormal";

my index.html file

<html lang="en">


    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="css/test.css" />
<h1 class="test">Testing</h1>

I also used this to generate woff and woff2 files.

Hey there!

Open your site,
open the Browser Dev Tools,
select “Fonts”,
reload the page,
look at the Status of your request.

200: Good
Red Numbers: Bad

ofcourse i checked that, everything was normal just like on other sites.

then it would be great to share your project with us,
e.g. on codesandbox or GitHub

im good, i fixed it already