I cannot use @font-face

Question

I’m trying to implement a natural language form. When I’m trying to use the following CSS in my CSHTML page, I get the error “the name 'font' does not exist in the current context”

@font-face {
  font-family: 'nlicons';
  src:url('../fonts/nlicons/nlicons.eot');
  src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/nlicons/nlicons.woff') format('woff'),
    url('../fonts/nlicons/nlicons.ttf') format('truetype'),
    url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

Check, The path you are giving in 'src' must be correct and font must be there. Then use[ font-family: 'nlicons';] to the html element where you want to display this fonts. — Front End Coder, Sep 25 '19 at 13:20

score 3 · Accepted Answer · answered Sep 25 '19 at 13:21

You have to escape the @ sign. The @ symbol is reserved for razor syntax.

To escape @ write it twice @@.

@@font-face {
  font-family: 'nlicons';
  src:url('../fonts/nlicons/nlicons.eot');
  src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/nlicons/nlicons.woff') format('woff'),
    url('../fonts/nlicons/nlicons.ttf') format('truetype'),
    url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

I cannot use @font-face

1 Answers1