no fonts available for @font-face rule microsoft edge fonts.com

GUID_33 picture GUID_33 · Jul 29, 2015 · Viewed 10.6k times · Source

I am getting a CSS3120: No fonts available for @font-face rule for the new Microsoft Edge browser on windows 10.

The fonts I am using are from fonts.com and have the normal declarations that I would expect (e.g. woff, ttf, svg etc).

{
font-family:"myfont";
src:url("/dv2/2/asdf.eot?asdf#iefix");
src:url("/dv2/2/asdf.eot?asdf#iefix") format("eot"),url("/dv2/14/asdf.woff2?asdf") format("woff2"),url("/dv2/3/asdf.woff?asdf") format("woff"),url("/dv2/1/asdf.ttf?asdf") format("truetype"),url("/dv2/11/asdf.svg?asdf") format("svg");
}

The sites still work normally on chrome, firefox, and IE for windows 10. my fonts that I used from Icomoon that are on my domain and fonts from google fonts seem to work fine on the edge browser. Anybody else having this problem with fonts.com?

Answer

freb picture freb · Nov 17, 2015

I was using a local version of Google Fonts like one of the commenters, @benoror. My issue ended up being that I used references to woff2 fonts. Edge doesn't support the woff2 format yet.

My solution was to switch back to loading the fonts from Google Fonts since they have logic based on the user-agent that determines which font files get referenced in the @font-face declarations.

Another option would have been to use regular woff instead of woff2: http://caniuse.com/#search=woff