Search code examples
cssasp.netiisweb-configwebfonts

ASP.NET app - Webfonts not loading until user is logged in to the site

Edited

Debugged again, finally realised what the real problem is (not how to solve it though).

When a browser tries to load fonts for the page in question, the response has status code 302 and 

Location: /Login.aspx?ReturnUrl=%2ffonts%2ffontawesome-webfont.woff2

Our authentication mode redirects all request to login page by default, and looks like that includes the fonts, too: 

<authentication mode="Forms">
  <forms loginUrl="~/Login.aspx" defaultUrl="~/Login.aspx" slidingExpiration="true" protection="All" timeout="60" path="/" />
</authentication>
<authorization>
  <deny users="?" />
</authorization>

It wasn't a problem before, because you have log in to even see most pages on the site, and after you did, fonts are loading fine. But the page I'm working on doesn't require a login (or even having a user account on the site), hence the problem.

The updated question is: how to make the font to load without authentication, and not compromise the authentication itself (security risks etc)?

Original post

We have an ASP.NET Webforms app that has some years behind it, and I've started experimenting with adding Bootstrap to it. So far so good, but I cannot get glyphicons to work - keep getting error squares instead of icons. We have been successfully using Fonts Awesome for some time, so I tried their icons - nope, same error squares (again, on the pages without Bootstrap Fonts Awesome work normally).

The Bootstrap was installed as Nuget package (the latest version, 3.3.7). Font Awesome is 4.4.0 and was installed manually. We do use Sass/Less.

We add scripts/css via bundles:

        bundles.Add(new StyleBundle("~/css/styles").Include(
            "~/css/bootstrap.css",
            "~/css/font-awesome.min.css"));

And this is how the web.config looks right now:

<staticContent>
  <mimeMap fileExtension="apk" mimeType="application/vnd.android.package-archive" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  <remove fileExtension=".otf" />
  <mimeMap fileExtension=".otf" mimeType="font/otf" />
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  <remove fileExtension=".eot" />
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
  <remove fileExtension=".ttf" />
  <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
  <remove fileExtension=".svg" />
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>

Now, many people seem to have a similar problem. Here's the solutions I've tried so far:

  1. Put css files and fonts into default folders (/css and /fonts on the same level, where Bootstrap expects to see them; overriding urls in @font-face doesn't work either) - that sort of improved matters, because now both fonts work in Firefox (most of the time) and Chrome (half of the time), but not in Edge/IE.
  2. Different combinations of MimeTypes in web.config (didn't make any difference).
  3. Updating Font Awesome to the latest version - no difference either.
  4. Internet Explorer won't display Glyphicons or WebFonts - thought about it, but if that's the case, why the problem only shows up with Bootstrap enabled?
  5. Clearing browser caches (repeatedly).
  6. Untrusted Fonts Blocking option in IE security settings - turned off by default, so not the case.
  7. Checking with the dev tools whether the fonts are actually loading - now this is where it gets interesting.

Chrome gives the "Failed to decode downloaded font: (...) OTS parsing error: invalid version tag" errors (when it does), and Edge the "CSS3114: @font-face unable to load invalid OpenType font" (the reference says it should be CSS3115, but whatever, "get permission or licenses" doesn't help much).

For both browsers the Network tab shows font files loaded as text/html with 302 Found (and the page/console still have errors). For Chrome, if I reload the page several times, eventually font files load status changes to 200 OK and type to font. That implies a problem with mimetypes, but why does it fix itself after enough reloads?

Again, Font Awesome works on pages that don't use Bootstrap, and files load as intended.

What am I missing here? Any ideas will be appreciated, because I'm stuck.

Solution

  • In the end, I've added the fonts folder as an exception to the web.config and that was it (yes, it really was that simple. Sigh):

    <location path="fonts">
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</location>

    Leaving the original question here as a reminder how easy you can misinterpret things and get desperate when you don't quite know what you are doing :)