Font Face isn't working in IIS 8.0

Question

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

How are you calling it in? Did you try the sample output in the Font Squirrel zip? — Aibrean, Sep 11 '14 at 20:56
If you are using IIS 8 you shouldn't have to add a mime type in your web config for WOFF. In fact it would more likely error for having a duplicate. — Colin Bacon, Sep 11 '14 at 21:03
@ColinBacon I read that after I posted. So I currenly have font/x-woff , this is inherited from IIS 8.0 . But still no luck on getting the correct font — joetinger, Sep 11 '14 at 21:09

score 266 · Accepted Answer · edited Dec 24 '19 at 11:44

266

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>

edited Dec 24 '19 at 11:44

khaled saleh

470
7
18

answered Sep 11 '14 at 21:10

Colin Bacon

15,436
7
52
72

2

I added `woff2` but still nothing – joetinger Sep 11 '14 at 21:17
4

If you look in your dev tools. Are you getting a 404 when it tries to get the font file? Is so check the path is correct and that you have permissions to browse to it in your browser. – Colin Bacon Sep 11 '14 at 21:30
Yes it does, `http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2` I'm not sure where they are getting the bundles folder from though. Any idea? – joetinger Sep 12 '14 at 12:35
4

I assume you are using ASP.NET bundling and minification. If you set this in your bundle config `BundleTable.EnableOptimizations = true`. Your local host should behave the same as on your production server. – Colin Bacon Sep 12 '14 at 12:43
1

Thanks for all the help it is now working. It was a combination of the `woff2` and the 404 error, which ended up being a misspelling in my bundle. Thank you! – joetinger Sep 12 '14 at 13:18
This didn't help me. I have the `.woff` and `.woff2` files in the same folder. I can get the `.woff` but not the `.woff2`. I tried adding this code and also added the `Mime Type` manually using `IIS` but still I get `404` error. What can I try again? – RealSollyM Mar 03 '15 at 10:09
@SollyM as patronising as this is going to sound, check your Dev Tools to see what address it's trying to pull, and follow the path to see if it's aiming where you think it is. Check spelling etc. too EDIT: Also clear your cache as per Varun's solution if you still get the issue (CTRL+Shift+R Win and Cmd+Shift+R Mac) – James Cushing May 06 '15 at 14:55
FOUND IT : If you are still getting a 404, check if you edited the right Web.config ... I was working in the wrong one, it must be the root Web.config – Apolo Aug 07 '15 at 09:03

score 82 · Answer 2 · answered Apr 09 '15 at 05:45

82

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.

answered Apr 09 '15 at 05:45

Varun

821
6
2

2

The spec is now recommending mimeType for woff to be [application/font-woff](http://www.w3.org/TR/WOFF/#appendix-b). – Steven Apr 22 '15 at 17:26
2

I was only getting a .woff2 404 issue and this worked for me. I only used the lines pertaining to woff2 – Francisc0 Jul 14 '15 at 14:49

score 28 · Answer 3 · answered May 15 '15 at 09:09

28

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.

answered May 15 '15 at 09:09

Scott Munro

13,369
3
74
80

2

why not use web.config,?!! – Mojtaba Pourmirzaei Dec 24 '16 at 06:14
9

@MojtabaPourmirzaei Because not everybody is a sysadmin. That is the whole reason IIS has UI. – Slava Feb 10 '17 at 12:06
1

If you're deploying a non-.NET website in IIS, you need to do it this way (e.g. an Angular app). – Jon Kruger Dec 04 '17 at 19:21

score 0 · Answer 4 · answered Sep 05 '19 at 14:33

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

score 0 · Answer 5 · answered Feb 12 '21 at 05:44

0

I am doing the following:

bundling in MVC5
building bootstrap
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.

answered Feb 12 '21 at 05:44

JohnWrensby

2,652
1
18
18

Font Face isn't working in IIS 8.0

5 Answers5

Linked