HTTP 404 Not Found Error with woff or woff2 Font Files

 For woff and woff2 fonts we get these below errors. I was getting for my Product  QFLES

• HTTP/1.1 404 Not Found
• Failed to load resource: the server responded with a status of 404 (Not Found)

even files are present in the directory.

Cause

On many server configurations, the WOFF or WOFF2 file is not expected.  The default configuration for most web servers is to deny a request for any unexpected file type, including this one.  This is why you see the HTTP 404 response, even though the file exists.

Fix

You simply need to update your web.config file to tell the web server (IIS) that this file is okay to serve, and how to serve it.  Use your preferred or available method to edit the web.config file, including the built-in Configuration Manager module.

Find the <system.webServer> section in your web.config, and look to see if it already has a <staticContent> section.  If it doesn't create it.  Otherwise, you'll be editing it now.

In the example you see below, the <staticContent> section likely didn't exist already, and it was added to the top of the <system.webServer> section, but before the <modules> section.  In your site, you don't need to have this exact placement.  Just make sure that the <staticContent> section is found somewhere between the open and close <system.webServer> tags.

  <system.webServer>
    <staticContent>
      <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
   <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <modules>

The important parts of the example above are the <remove> and <mimeMap> tags for your font files.  If you already have a <staticContent> section added, make sure those lines are added in your configuration file.