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

Solution 1

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

Solution 2

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

Solution 3

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 :)

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

View more solutions

Comments

[justme]

I know this but the thing is that I don't have access to the links for the woff format.. This is why I posted a new question about this : stackoverflow.com/questions/34453010/…

[Zach Saucier]

This does not provide anything in addition to the answer that was already here

[Zach Saucier]

@justme That has nothing to do with programming, but rather having necessary files. This is the correct answer

[justme]

The link for converting font-face and the procedure wasn't in the provided answer!!

[Jonathan Argentiero]

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

[Pamela Cook - LightBe Corp]

Thanks @JonathanArgentiero. I have updated my answer. If any more changes need to be made please let me know.