IIS Web Fonts, Bootstrap 3 Glyphs Not Loading with IE9 or 10. Chrome and Firefox work

Question

Scenario:

Using IIS 7.5 with an MVC4 application.

The fonts can be downloaded from the server if you browse to their absolute paths. No 404 errors on any font.

No other errors showing in console, or Network capture in IE dev tools (or Chrome, or Firefox dev tools)

IE9 and IE10 - Web fonts do not load. Bootstrap 3 glyph icons do not load.

Firefox and Chrome - Web fonts load correctly. Bootstrap 3 glyph icons load correctly.

When running the site locally from Visual Studio 2012 dev server the fonts load fine across all browsers. Bootstrap glyphs load correctly across all browsers.

My CSS Code:

@font-face {
    font-family: 'chunkfiveroman';
    src: url('../Content/fonts/chunkfive-webfont.eot');
    src: url('../Content/fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
            url('../Content/fonts/chunkfive-webfont.woff') format('woff'),
            url('../Content/fonts/chunkfive-webfont.ttf') format('truetype'),
            url('../Content/fonts/chunkfive-webfont.svg#chunkfiveroman') format('svg'),
            url('../Content/fonts/Chunkfive.otf');
    font-weight: normal;
    font-style: normal;
}

What I have tried:

I have manually added the mime types to the server for web fonts (.otf, .eot, .woff) (.svg and .ttf were already there).

I have tried setting the mime types on all the manually added font entries a lot of different ways based on Googling (application/octet-stream, font/otf, etc.)

My plea for help:

What else could it be? Anything else I can try? Edit: See below. How can I make IE download the font form the server? Again, in Firefox and Chrome, they both download the font and it works fine.

EDIT:

You can see locally, it downloads the font and it works fine.

Yet, when uploaded to IIS on the server, it doesn't even attempt to download the font.

did you check the relative paths? if your accessing a path such as `/mycontroller/myaction/myparameter` (which is a pretty common default asp path) & your css from above is used, it will be attempting to get the font from `/mycontroller/myaction/content/fonts/chunkfive.otf`, etc. it either needs to be an absolute path, or include some more `../` use the fiddler, or the network tools in the browser to see what it's accessing — Simon Halsey, Jan 23 '14 at 23:36
I'm not seeing any 404's in any of the logs. I even downloaded fiddler, but it provides the same functionality that Network capture performs - Also, keep in mind in Chrome and Firefox all of this works great. If it was a path problem, those browsers would not work either. — Jordan, Jan 24 '14 at 13:54

score 2 · Answer 1 · answered Jan 23 '14 at 16:12

I had this problem and I found it was happening due to the minification when building in release mode.

Rather than downloading the files manually from the bootstrap site and configuring bundling I use the nuget package which does it for me.

If you would like to do that take the following steps.

Run the following command to install Bootstrap:

Install-Package Twitter.Bootstrap.MVC

This downloads all the bootrap files and includes the below pre-defined Bootstrap bundle config:

public class BootstrapBundleConfig
{
    public static void RegisterBundles()
    {
        // Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
        // For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
        // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
        // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
    }
}

The above also includes comments describing how to render out the bundles.

I think the original 404 font error was due the fonts folder being at a different level to what is specified in the minified css.

If you prefer to keep your current solution the only way I could fix the 404 was to copy the font folder to the root of the web application and keep the default bootstrap css for your fonts.

To test it locally simply remove debug="true" from your web config.

I am going to work on this today and I will let you know. Thanks for your reply. — Jordan, Jan 24 '14 at 13:55
Nice one, I'm surprised more people are not finding this. I answered a very similar one the other day too, virtually identical answer. http://stackoverflow.com/questions/21269884/twitter-bootstrap-glyphicons-do-not-appear-in-release-mode-404/21270771#21270771 — hutchonoid, Jan 24 '14 at 13:57
I don't have high hopes, because I am not experiencing the same thing as the other post you reference.In other browsers all of this works fine. Just not I.E. — Jordan, Jan 24 '14 at 14:07
Yeah, it was happening in other browsers for me too. Worth giving it a go though. Good luck. — hutchonoid, Jan 24 '14 at 14:10
I have updated my question. if you have any other suggestions I would love to hear them! Thanks again. — Jordan, Jan 24 '14 at 18:52

score 0 · Accepted Answer · edited May 23 '17 at 11:59

After spending a lot of hours on this, I solved the problem by using the browser detection Javascript from https://stackoverflow.com/a/9851769/1183321. Once I had this in place, I just went to transparent PNGs for the text and glyphs I needed rendered in the particular font/glyph.

EDIT: Jan 2016

Problem solved. The root of the issue lies within IE security settings. In internet options, change the setting of your server's domain/IP address to medium or above and make sure to disable 'protected mode'.

Also, some sites might be configured as an 'intranet site' if you access the server by its FQDN instead of just IP.

IIS Web Fonts, Bootstrap 3 Glyphs Not Loading with IE9 or 10. Chrome and Firefox work

2 Answers2