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 ()

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 ()

• javascript
• css
• asp-core-mvc
• font-face

Share Improve this question Follow edited Nov 19, 2024 at 2:25 MrMustafa022 asked Nov 18, 2024 at 22:13 MrMustafa022MrMustafa022 2555 bronze badges 1

• Would I know please why my post is downvoted, to avoid this in my coming posts? or How could I know the reason of post downvote? – MrMustafa022 Commented Nov 23, 2024 at 14:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Firstly you need confirm the following things:

• Ensure that your font file (Custom-VariableFont_slnt.ttf) is located in the wwwroot/css folder.

• Ensure your Startup.cs or Program.cs (for .NET 6/7/8) is configured to serve static files:

   app.UseStaticFiles();  //be sure the middleware order
  
   app.UseRouting();  
   app.UseAuthorization();    
   app.MapControllerRoute(
       name: "default",
       pattern: "{controller=Home}/{action=Index}/{id?}");
  
   app.Run();
  

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);
}