application/font-woff2 not working when using Asp.Net VNext

Question

I'm doing some experiments with VNext + OSX + Chrome. I'm trying to get a woff2 file

GET http://localhost:5003/fonts/fontawesome-webfont.woff2?v=4.3.0 

But an error occur. See the request's header below

Remote Address:127.0.0.1:5003
Request URL:http://localhost:5003/fonts/fontawesome-webfont.woff2?v=4.3.0
Request Method:GET
Status Code:404 Not Found

This is my Startup.cs

    public void Configure(IApplicationBuilder app)
    {
        app.UseStaticFiles();

        app.UseServices(services =>
        {
            services.AddMvc();
        });

        // Add MVC to the request pipeline
        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action}/{id?}",
                defaults: new { controller = "Home", action = "Index" });
        });
    }

I saw inside AspNet project at Github about StaticFiles (Link bellow) and it seems to be supported.

https://github.com/aspnet/StaticFiles/blob/dev/src/Microsoft.AspNet.StaticFiles/FileExtensionContentTypeProvider.cs

Can you guys give me some help?

Scone

possible duplicate of Font Face isn't working in IIS 8.0 – Dorcy

@CharlesBurns actually, my post isn't about II8 specifically and the other solution won't work because I'm not working with Web.Config. They are not the same solution. Not even the same question. – Scone

Both accepted answers mention the same edit Web.Config and both refer to adding a MIME type to prevent a 404 error. The other question mentions IIS8 in title only, not tags. It does look like both involved two problems: MIME types for both, pre-release software in one, a typo in the other. I'll remove my close vote. – Dorcy

This question and answer also applies to v=4.3.0. It solves the issues i had in my project. Thanks – Homoousian

Answer 1

The file format woff2 is in the mapping list but this was added recently (February 2015) so you may not use a release that contains this change. So to add a custom file format you can use the IIS way using web.config:

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

Or using StaticFilesOptions:

public void Configure(IApplicationBuilder app)
{
    StaticFileOptions options = new StaticFileOptions();
    FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
    if (!typeProvider.Mappings.ContainsKey(".woff2"))
    {
        typeProvider.Mappings.Add(".woff2", "application/font-woff2");
    }
    options.ContentTypeProvider = typeProvider;
    app.UseStaticFiles(options);
}

Derna

You were right, the problem was because I was using an alpha release before this changes. Thanks. – Scone

The mime type in your Web.config code needs to be application/font-woff2. The "2" is missing. – Doig

Thanks, I've fixed it. – Derna

The link for the mapping list does not work anymore, this is the correct one. – Gile

Thanks for this useful tip. Worked on my project. – Drin

The current standard mime type is font/woff2, see w3.org/TR/WOFF2/#IMT or the linked mapping list – Prehuman

Thank you very much this save a lots & lots of time. – Colonel

Answer 2

add a mime type declaration to your web.config

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

for more info see:

Set mime types for web fonts in IIS

Quick fix: IIS .woff font file 404 not found in asp.net mvc

Bosky

In case someone else has issues, try removing the . in .woff2, that fixed it for me after I added the above mimeMap to my web.config. – Grobe

Answer 3

If above did not work for you (didn't work for me). Then try with this one :

<mimeMap fileExtension="woff2" mimeType="application/font-woff" />

Depart

Worked for me as well. I guess the entry that they built in includes the . in the fileExtension because when I add the map with .woff2 as the extension I get an error that there is a duplicate entry. When I removed the . it started working. Great find! – Physiological

Answer 4

add mime type in plesk

application/font-woff2  .woff2

it worked for me

Roger

Can you explain a bit? – Williamwilliams

Open Web Server settings in plesk hosting panel there u can find the option MIME types . Just add that mime type there . – Roger

Answer 5

I needed to enable the extension first (which could be done in IIS too) like:

<system.webServer>
  ...
  <security>
    <requestFiltering>
      <fileExtensions>
        <remove fileExtension=".woff2" />
        <add fileExtension=".woff2" allowed="true" />
      </fileExtensions>
    </requestFiltering>
  </security>
...
</system.webServer>

as well as adding the previously mentioned static content...

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

Hannan