using @font-face in Microsoft Edge

Question

I am dealing with a strange issue here.. It seems that Microsoft Edge browser doesn't load fonts when I use @font-face. I checked all my computers that run Windows 10 & Microsoft Edge.

I checked http://caniuse.com/#search=font%20face

It says that font-face is compatible with Edge so I don't know what's going on. In my example I just have a div and its font parameter.

CSS

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}

HTML

div {
  font-family:'Dosis';
}

Live version

http://codepen.io/mariomez/pen/YwGGWy

Answer 1

You are using only WOFF2 format which has no support on Microsoft Edge.

WOFF2 Compatibility

To solve the problem include WOFF format in your @font-face declaration. Most of the modern browser supports WOFF

For maximum browser support include all possible format.

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}