@font-face not working in my style.css

Question 1

Did you set something font-family: Brandon Grotesque?

You just added your font to the "available" fonts. Didn't tell something to use it. Understand? Like, you have Arial, Comic Sans, Tahoma. But to use, you need to set.

body{
font-family: Brandon Grotesque;
}

>more about

_

Example:

where

/
/ index.html
/ style
  | style.css
  | BGREG.otf
  | BGBOLD.otf

/index.html

<!DOCTYPE html>
<head>
<title>My title</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<p class="something-bold">Bold</p>
</body>
</html>

style/style.css

@font-face {
font-family: Brandon Grotesque;
src: url('BGREG.otf'); 
}

@font-face {
font-family: Brandon Grotesque;
font-weight: bold; 
src: url('BGBOLD.otf');
}

body{
font-family: Brandon Grotesque;
}

.something-bold{
font-weight: bold;
}

Try (:

You can too load fonts from Google Fonts. Easily, by script import, by import on css, or JS.

Question 2

Don't forget to enclose your font name in quotes:

@font-face {font-family: "Brandon Grotesque";}

body{font-family: "Brandon Grotesque";}

Do I need to wrap quotes around font family names in CSS?