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');
}  

Answer 2

I just found that if you have the google font installed locally (eg if you've been doing a mockup), edge will not display the web font version. I did a lot of reading round to find the root of the issue and did not see anyone mention this.

hope this helps someone else :)

Answer 3

Procedure:

The procedure I followed in order to install all necessary formats was to find which font-weight I needed from each font and then go and download it from Google Fonts. Then using the https://everythingfonts.com/font-face (font face generator) I downloaded all the formats along with the CSS code. Then I incorporated them all into my CSS and HTML.

CSS:

@font-face {
    font-family: 'JosefinSansLight';
    src: url('/fonts/JosefinSansLight.eot');
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
         url('/fonts/JosefinSansLight.woff2') format('woff2'),
         url('/fonts/JosefinSansLight.woff') format('woff'),
         url('/fonts/JosefinSansLight.ttf') format('truetype');
}

HTML (excerpt):

.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}

Files: (my domain folder)/fonts

fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf

Answer 4

Things have changed for Microsoft Edge regarding .woff fonts. I recently purchased a Windows 10 laptop. The websites that had .woff fonts in @font-face did not display them in Microsoft Edge but did display them in Internet Explorer. The Microsoft developer website as of 5/11/2016 says that .woff2 is supported in Edge as follows.

Microsoft Edge supports the Web Open Font Format (WOFF) File Format 2.0 specification which provides an improved compression algorithm from WOFF 1.0. The font format "woff2" is supported.

Here is an example of the CSS code I implemented in all of my websites to successfully display my special fonts using Microsoft Edge based on the link above.

@font-face {
  font-family: Eurostile;
  src: url("http://mylink/eurostile.woff"), url("http://mylink/eurostile.woff2"), url("http://mylink/eurostile.eot"), url("http://mylink/eurostile.ttf") format('truetype');
}