Turns out the ttf format just wasn't supported for some odd reason, still unknown. But converting it to .eot and adding that in the source fixed it!
@font-face in CSS not recognizing "src"
Pergunta
I am trying to bring in a custom font and use it in a class, but @font-face is not working as expected. The command "src" is not recognized as an identifier at all for some reason. Here's the code:
.font
{
font-family: 'nevis';
}
@font-face
{
font-family: 'nevis';
src: url(nevis.ttf);
}
nevis.ttf is in the same folder with the html and css.
In notepad++, it's saying src is an unknown identifier, and in IE10 console, it reads:
CSS3111: @font-face encountered unknown error.
nevis.ttf
I've tried putting the font file name in quotes, the font-family name without quotes, it just won't recognize src. I have not been able to find this error otherwise, so I apologize if it has already been resolved. And thank you for any help!
UPDATE: Thank you for the help so far! I have tried both of your solutions to no avail, unfortunately it still does not see "src" as a css identifier. As this is a brand new and very small page I'll just paste in the whole page, although I don't think there's anything obviously wrong like a line not ended or something not closed properly.
.font
{
font-family: 'nevis';
}
#titlediv
{
font-size:40px;
background-color:red;
height: 50px;
}
@font-face
{
font-family:"nevis";
src: url("nevis.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
Solução 3
Outras dicas
Try this:
@font-face
{
font-family:"nevis";
src:url("nevis.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
.font
{
font-family: 'nevis';
}
I tried with this nevis
font and worked.
My code is
@font-face { font-family: nevis; src: url('fonts/nevis/nevis.ttf'); }
h1
{
font-family: nevis;
}