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;
}
有帮助吗?

解决方案 3

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!

其他提示

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;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top