Font Face isn't working in IIS 8.0

CssIisFontsWoff2

Css Problem Overview


I have a font-face in my program generated from Font Squirrel I just can't get it to work in IIS, it works in localhost. I added application/font-woff article to my MIME Types but it still doesn't want to work.

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

EDIT CURRENT MIME

I am using the default IIS 8 MIME font/x-woff

Css Solutions


Solution 1 - Css

Great to see WOFF2 being included in Font Squirrel fonts! Whilst IIS 8 does not need a mime type added for WOFF it will need one for WOFF2. The W3C recommends:

application/font-woff2

For more info on WOFF2 see here.

To add the mime type in IIS, modify your Web.Config as follows:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>

Solution 2 - Css

In order to make woff and woff2 fonts to properly work in IIS you should add the following MIME types to the Web.Config file.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
		<remove fileExtension=".woff" />
		<remove fileExtension=".woff2" />
		<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
		<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
	</staticContent>
	

If you still face the 404 error on Google Chrome you should clear your browser cache before reloading the page.

Solution 3 - Css

Note that it is also possible to configure MIME types within IIS Manager. Just select the website and then double click on the MIME Types icon under IIS in the main pane.

enter image description here

You should then see a list of all of the existing MIME Types and be able to add new ones using the Add... link in the right pane.

Solution 4 - Css

I was having this issue today while deploying a Web solution Metro4 UI icons and switching from the CDN to the Compiled option.

My project was developed using WebSharper platform, but the solution is anyway independent from these implementation details.

Long story short, I've discover that I had to add the file extension, e.g. for .ttf, inside the security section under the system.webServer of the Web.config.

<security>
    <requestFiltering>
        <fileExtensions>
            <add fileExtension=".ttf" allowed="true" />
        </fileExtensions>
    </requestFiltering>
</security>

The same configuration option is also available under the GUI settings of IIS

IIS GUI

Solution 5 - Css

I am doing the following:

  1. bundling in MVC5
  2. building bootstrap
  3. using @font-face in bootstrap

I had a min.css file deployed on the server, that non-min file was included in the bundle. Once I deleted the .min.css file. It all worked.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjoetingerView Question on Stackoverflow
Solution 1 - CssColin BaconView Answer on Stackoverflow
Solution 2 - CssVarunView Answer on Stackoverflow
Solution 3 - CssScott MunroView Answer on Stackoverflow
Solution 4 - Cssuser11323942View Answer on Stackoverflow
Solution 5 - CssJohnWrensbyView Answer on Stackoverflow