Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Face isn't working in IIS 8.0

Tags:

css

iis

fonts

woff2

People also ask

Is font face deprecated?

According to Apple's documentation, @font-face is deprecated for use on the iPhone version of Safari.

What is the function of font face?

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.


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>

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.


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.