문제

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