javascriptcssasp.net-core-mvcfont-face

Font Path is invalid in font-face


I need to use specific Font in ASP.NET Core MVC Project, So, in css file:

CSS:

@font-face {
    font-family: "CustomFont";
    src: url(css/Custom-VariableFont_slnt.ttf);
}

But I get error that the font path is invalid

I tried to change it like:

 url(~/Custom-VariableFont_slnt.ttf);

or

 url(https://localhost:7267/css/Custom-VariableFont_slnt.ttf);

or

 url(../css/Custom-VariableFont_slnt.ttf);

But always I get the same error:

Failed to load resource: the server responded with a status of 404 ()

Solution

  • Firstly you need confirm the following things:

    Then, the wwwroot folder is the root for static files, the path should be relative to it by using /css/Custom-VariableFont_slnt.ttf:

    @font-face {
        font-family: "CustomFont";
        src: url(/css/Custom-VariableFont_slnt.ttf);
    }