Frage

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;
}
War es hilfreich?

Lösung 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!

Andere Tipps

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;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top