CODEWITHSUNDEEP
cssfonts
Amanda
Amanda

Reputation: 11

@font-face CSS property not working

I'm trying to bring in a custom font to my website, this is my code:

@font-face {font-family: Bebas Neue; 
      src: url('BebasNeue.otf');
}
body {

  font-family: "Bebas Neue", sans-serif;
  color: #232525;
  padding-top:20px;
  background-color: black;
}

I have the .otf file uploaded to the server in the same file and I declare the font in every element that uses it!

I can't figure out why it won't work!?!

Upvotes: 0

Views: 235

Answers (3)

Will
Will

Reputation: 11

If you're using an IIS server (Windows), then the problem may be that IIS doesn't know how to serve the files. Try adding a MIME map for .otf in the Web.config file. Inside the configuration tag, enter the following:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
    </staticContent>
</system.webServer>

I think you can confirm this is the issue by putting the address for the .otf in the browser window. You should receive an HTTP Error 404.3; try updating the web configuration file if that's the case.

Upvotes: 0

Leonardo Barbosa
Leonardo Barbosa

Reputation: 1396

A complete @font-face declaration would be something like this:

@font-face {
  font-family: "RegencyScriptFLF Regular";
  src: url("http://site/fontes/RegencyScriptFLF-Regular.eot"); // IE
  src: local("RegencyScriptFLF-Regular"),
  url("http://site/fontes/RegencyScriptFLF-Regular.ttf") format("opentype");
}

Then, you can use it somewhere else in your code:

p { font-family: "RegencyScriptFLF Regular", Cursive; }

Upvotes: 4

Ink
Ink

Reputation: 191

@font-face {
font-family: bn ;
src: url("bn.otf") format("opentype");
}
@font-face {
font-family: bn;
font-weight: normal;
src: url("bn.otf") format("opentype");
}

body{
font-family:bn;
}

bn means Bebas Neue

Upvotes: 0

Related Questions