1

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?

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
user3578949
  • 11
  • 1
  • 3

2 Answers2

4

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.

rafaeldefazio
  • 449
  • 2
  • 7
  • 1
    Yes, I did, I already found the solution, my style.css file wasn't in the root folder, the font was. So that's why is didn't work. – user3578949 Apr 27 '14 at 18:54
  • Remember, if the answer helped you, mark it as solution :) – trebor Apr 27 '14 at 18:55
  • Oh, congrats. If you wanna add your css to a folder and font to another, look: Just add the folder location before your font link in @font-face: @font-face { font-family: Brandon Grotesque; src: url('`../fonts/BGREG.otf`'); } per example – rafaeldefazio Apr 27 '14 at 18:58
0

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?

Community
  • 1
  • 1
Daze
  • 478
  • 5
  • 17