IE loads sometimes WOFF and sometimes EOT font type

Question

I use Angular Material with Angular Material Icon. In my index.html, I have the following tag :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

This line downloads a CSS file with a @font-face selector. It seems the "src" property coming from the CSS is different according the browser.

With Chrome, no issue, it downloads a WOFF2 font. But on IE11, sometimes the browser downloads a WOFF font and sometimes, a EOT font. With WOFF, icons are displayed. With EOT, they aren't.

Do you have an idea how to force browser to download WOFF font? I would like to avoid to store font-face locally.

Thank you !

Answer 1

Well, I have finally changed the way to use Material Icon font.

I deleted the following line in my index.html file :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I installed material-design-icons package via NPM and I configured the styles section of my angular-cli.json file to point on the css file like this :

"styles": [
    "<relative_path>/node_modules/material-design-icons/iconfont/material-icons.css"
]

Now, IE11 always loads WOFF type.

Problem solved!