@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