CODEWITHSUNDEEP
csstwitter-bootstrapinternet-explorercross-browserfont-family
Evan Hobbs
Evan Hobbs

Reputation: 3672

Icon fonts opaque in all versions of Internet Explorer

I created a couple icon fonts with IcoMoon.

They work fine in all other browsers but some reason they are completely opaque in all versions of IE tested (8-11). Bootstrap's icon fonts look fine so it's something I must be doing or not doing.

You can see it in the upper left corner here: http://voicethread.com/new/myvoice/#browse

How it looks in different browsers:

How it looks in Chrome, FF, Safari, and IE

Upvotes: 1

Views: 263

Answers (1)

KyleMit
KyleMit

Reputation: 30107

My guess is there is an issue with the way that IcoMoon created the font files.

I'm having trouble rendering in Chrome, IE, and FF (respectively):

Render

It appears the font is being delivered to the site okay:

Network

Here are the relevant portions of your CSS file, which wouldn't hurt to include in the question:

@font-face {
    font-family: 'vt-icons';
    src: url('fonts/vt-icons/fonts/vt-icons.eot?ovc75f');                                      /* IE9 Compat Modes */
    src: url('fonts/vt-icons/fonts/vt-icons.eot?#iefixovc75f')    format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/vt-icons/fonts/vt-icons.woff?ovc75f')         format('woff'),              /* Modern Browsers */
         url('fonts/vt-icons/fonts/vt-icons.ttf?ovc75f')          format('truetype'),          /* Safari, Android, iOS */
         url('fonts/vt-icons/fonts/vt-icons.svg?ovc75f#vt-icons') format('svg');               /* Legacy iOS */
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'vt-icons';
}

.icon-vt-logo-solid:before {
    content: "\e600";
}
.icon-study: before {
    content: "\e601";
}

If you try another content type like "\e601", it works fine. So I'm guessing it's the build for that specific item.

You can confirm this by downloading a font-viewer like FontForge and opening the .woff file:

Fonts

It shows the same problem, so it's unlikely to be the browser.

If you double click on the icon, you'll see the exact vectors used to create it:

VT Original

What's happening is that the circle and the VT logo are both rendered on the "fore" layer. Everything inside the circle is filled in, rendering the "VT" fill invisible. You easily see this by changing the shape of the circle and seeing the VT come out from "behind" it.

VT New

I'm not sure what the difference in circles was, but the twitter circle seems to be properly cancelling out the inner shapes. So you can copy and paste that circle into your other icon to get this:

Twitter & VT

Then just export and upload to your host

Just for good measure, I saved the changes, exported some of the relevant font files, and added them to GitHub so you can download them.

Until you add to your own host, this'll work:

@font-face {
    font-family: 'vt-icons';
    src: url('http://www.corsproxy.com/kylemitofsky.com/libraries/libraries/fonts/vt-icons.woff?ovc75f') format('woff');
    unicode-range: U+E600-E626;
}

Working Version! Yay!

Working Version

By the way, You can also try adding a unicode-range for @font-family declarations so the browser only needs to download the characters it absolutely needs, like this: unicode-range: U+E600-E626;

Further Reading

Upvotes: 3

Related Questions