Font Face Isn't Working in Iis 8.0

Font Face isn't working in IIS 8.0

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>

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

Custom web font not working in IE9

First, the goods:

@font-face {
    font-family: 'ludger_duvernayregular';
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p.test {
    font-family: 'ludger_duvernayregular', Arial, serif;
    font-weight: 400;
    color: blue;
}

Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.

What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:

1. Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
2. You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).

Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.

Breakdown...

Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:

• eot
• woff
• ttf
• svg

You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.

Now, first name your font so you can reference it:

font-family: 'ludger_duvernayregular';

IE9 Compat Modes:

src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');

Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).

On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.

IE6, 7 and 8:

src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),

Note this part:

.eot?#iefix <<< See below for an explanation.

Further IE CSS Fix

In some rare cases, IE will fail because the @font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.

_{- From the Font Spring article}

I have no idea why this works, so I'm taking their word for it.

Modern Browsers:

url('http://../ludgerduvernay.woff') format('woff'),

Safari, Android, iOS:

url('http://../ludgerduvernay.ttf') format('truetype'),

Legacy iOS:

url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');

Then use it:

p {
    font-family: 'ludger_duvernayregular', Arial, serif;
}

I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.

So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:

Fix IE9 on the Server Side (IIS)

Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.

_{- From the Font Spring article}

So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.

Now I had a little help here, and I think you should think about the following options:

1. Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
2. Font Squirrel has a @Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
3. I found that awesome tool on this Opera Dev page. That is also worth reading.
4. And of course, that blog post AlienWebGuy linked to at Font Spring.

This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.

Happy coding. :)

---

The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)

application/font-woff2 not working when using Asp.Net VNext

The file format woff2 is in the mapping list but this was added recently (February 2015) so you may not use a release that contains this change. So to add a custom file format you can use the IIS way using web.config:

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer>

Or using StaticFilesOptions:

public void Configure(IApplicationBuilder app)
{
    StaticFileOptions options = new StaticFileOptions();
    FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
    if (!typeProvider.Mappings.ContainsKey(".woff2"))
    {
        typeProvider.Mappings.Add(".woff2", "application/font-woff2");
    }
    options.ContentTypeProvider = typeProvider;
    app.UseStaticFiles(options);
}

@font-face not loading in IE8

Firstly I would check that the font files are actually being served. It could be as silly as a relative path not being correct - although in this case I doubt it. Use a tool like Charles or Fiddler for this. These tools should always be the first port of call for checking that files are being served as expected.

I would also check that the extensions/mime types are set up in the site's config, or in IIS's config.

@font-face EOT not loading over HTTPS

I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

Bonus Reading

• Eric Lawrence: Vary with Care (archive)
• IE Blog: Caching Improvements in Internet Explorer 9 (archive)

---

Related Topics