@font-face not working in my style.css

StackOverflow https://stackoverflow.com/questions/23327331

  •  10-07-2023
  •  | 
  •  

Вопрос

I have been searching on the web to find an answer to this question, but couldn't find one. In my style.css I'm using @font-face to use a font (that I uploaded on the server of my webiste) on my website. I did the right thing, I think so, but the font still won't show up on the website..

My code in 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');}

What's wrong? Or do I have to add some code?

Это было полезно?

Решение

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.

Другие советы

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?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top