htmlcssfontswoffwoff2

How to load a woff2 font into IE with CSS?

I have IE11 on IE10 mode, and I want to load a css file. I have this

@font-face {
    font-family: celestesansbold;
    src: url('celestesanscomp-bold-webfont.woff2');
}

And then in the console I see this

CSS3111: @font-face encountered unknown error.
celestesanscomp-bold-webfont.woff2

And in the network tab I see

Name    Protocol    Method  Result  Content type    Received    Time    Initiator
.../celestesanscomp-bold-webfont.woff2  HTTP    GET 200 font/woff2  (from cache)    0 s

And the don't does not load correctly on the page, the text does not change.

Does anyone know what's wrong?

However regular woff files work, but this is woff2.

Thanks

Solution

  • IE doesn't support woff2. That's why you need to provide woff.

    In fact, woff is the standard and it's all you need.
    You only load woff2 because it provides better features for less bandwidth in browsers that do support it.
    Older versions of IE used to need eot, but it's deprecated now.

    However, providing more than one font type file does not mean the browser loads all of them. It stops loading them when it finds one it successfully activates. Which means their order is quite important. You want to put the more modern/efficient ones first and the larger ones (fallbacks) last. It should be: woff2, woff, eot, svg, ttf/otf.