How to use installed font in my project?

HTML-CSS
1

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:

granit-webfont.woff
granit-webfont.woff2
test.css

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">

  <head>

    <meta charset="UTF-8" />

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

    <title>Document</title>
    <link rel="stylesheet" href="css/test.css" />
  </head>
  <body>
<h1 class="test">Testing</h1>
  </body>

I also used this https://www.fontsquirrel.com/tools/webfont-generator to generate woff and woff2 files.

2

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

Screenshot_2020-10-10_08-48-38
Screenshot_2020-10-10_08-48-381323×567 65.1 KB

3

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

4

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

5

im good, i fixed it already