CODEWITHSUNDEEP
asp.net-core-mvcasp.net-core-mvc-2.0
Pascal Ménard
Pascal Ménard

Reputation: 41

ASP.NET Core 2 MVC - Font-awesome woff/2 ttf not loading in production

I'm building a personal project and having some issues with font-awesome webfonts not loading. i've made a gulp build to integrate Bootstrap 4 and building all my JS/SCSS/Fonts/Img from a src directory to a dist one. I serve Dist outside of wwwroot

When setting ASPNETCORE_ENVIRONMENT to Development, everything works right, my fonts load correctly but in "Production", it doesnt load and i get the following message in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)fa-regular-400.woff
Failed to load resource: the server responded with a status of 404 (Not Found)fa-regular-400.woff2
Failed to load resource: the server responded with a status of 404 (Not Found) fa-regular-400.ttf

When i mouseover the error i see that they are served from my SrcAssets not the DistAssets like all my other assets files.

I didnt found any working ressources regarding Core2.0 MVC everything i've found is regarding older stuff where these files extensions need to be mapped to for ex. application/font-woff2

Last thing i've tried was this below in the Configure method but it's still doesnt work.

FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();

if (!typeProvider.Mappings.ContainsKey(".woff2"))
{
    typeProvider.Mappings.Add(".woff2", "application/font-woff2");
}
if (!typeProvider.Mappings.ContainsKey(".woff"))
{
    typeProvider.Mappings.Add(".woff", "application/font-woff");
}
if (!typeProvider.Mappings.ContainsKey(".ttf"))
{
    typeProvider.Mappings.Add(".woff", "application/font-ttf");
}

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = typeProvider,
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "DistAssets")),
    RequestPath = "/assets"
});

Thanks for your help.

Upvotes: 4

Views: 3273

Answers (3)

Harrison
Harrison

Reputation: 2347

We had the same issue with .NET and found that it was Windows Server not allowing *.woff2 files to be served correctly.
We followed this guide which we slightly adapted due to this answer which states that the MIME type for *.woff and *.woff2 files is now (more generally accepted) font/woff and font/woff2 (and no longer, as the guide says, application/font-woff)

From the guide

  1. Open IIS Manager IIS Manager with an arrow showing the MIME Types button Open the "IIS Manager" at the top level (server level) and navigate to "MIME Types"

  2. Set the MIME Type for both .woff and .woff2 filetypes Set the MIME Type value for woff and woff2 filetypes Our server already had a value for .woff (which was font/woff), so we set a new value for .woff2 to font/woff2
    Note: As per the answer linked above, the value set is font/woff and not application/font-woff as the MIME Type has been updated in the spec.

Note: The images above were copied from the linked guide.

You can also use the IIS command line tool appcmd like this:

c:\windows\system32\inetsrv\appcmd
             set config /
             section:staticContent /+
                         "[fileExtension=' .woff2 ',mimeType=' font/woff2']"

No access to the global server:

Erik Parso's answer indicates (as does the linked guide), if you want to set this on your local server (or have to because you don't have access to the machine the web server is running on), then within the web.config file you should place the following:

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="font/woff" />

    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

This file will most likely be located at the top level of the .NET project and may also be called Web.config but will likely be an XML file.

Upvotes: 0

Erik Parso
Erik Parso

Reputation: 294

Try add this code to your web.config

<configuration>
     ....
     <system.webServer>
         <staticContent>
             <mimeMap fileExtension="woff" mimeType="font/woff" />
         </staticContent>
     </system.webServer>
</configuration>

Upvotes: 1

Karter
Karter

Reputation: 43

I was have the same issue but I add "../lib/FontAwesome/webfonts" instead "../webfonts" in _variables.scss

$fa-font-path:                "../lib/FontAwesome/webfonts" !default;

Maybe it'll help you too :)

Upvotes: 1

Related Questions