Geek Answers Handbook

Using @ font-face in Microsoft Edge

I am dealing with a strange problem here. The Microsoft Edge browser doesn't seem to load fonts when I use @ font-face. I checked all of my computers that run Windows 10 and 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 is going on. In my example, I only 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

+6
source share
4 answers

Procedure:

The procedure I followed to install all the required formats was to find which font I needed from each font, then go and download it from Google Fonts. Then, using https://everythingfonts.com/font-face (font generator), I downloaded all the formats along with the CSS code. Then I included them all in 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
+4
source

You are using only the WOFF2 format, which does not support Microsoft Edge.

Compatibility WOFF2

To solve the problem, include the WOFF format in your @font-face ad. Most modern browsers support WOFF

For maximum browser support, enable all possible formats.

 @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'); }
+4
source

I just found that if you have the google font installed locally (for example, if you did the layout), the edge does not display the version of the web font. I read a lot to find the root of the problem and did not see anyone mention this.

hope this helps someone else :)

+4
source

Microsoft Edge has changed regarding .woff fonts. I recently bought a laptop for Windows 10. Websites with .woff fonts in @ font-face did not display them in Microsoft Edge, but displayed them in Internet Explorer. The Microsoft developer website on 11/05/2016 says .woff2 is supported in Edge as follows.

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

Here is a sample CSS code that I have implemented on all my sites to successfully display my custom 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'); }
+2
source

More articles:


All Articles