1

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.

Chrome logs

IE11 logs

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 !

Rob
  • 14,746
  • 28
  • 47
  • 65
mike
  • 395
  • 1
  • 5
  • 12
  • Is the font you want to use available in woff? – Rob Dec 01 '17 at 11:24
  • Of course since sometimes IE downloads it as WOFF type and icon is thus displayed. Font is Material Icon from Google. IE downloads it as WOFF especially when I have Fiddler open... – mike Dec 01 '17 at 11:34
  • So you are saying sometimes *the same font* is downloaded as woff and other times it's downloaded as eot? – Rob Dec 01 '17 at 11:35
  • Yes @Rob ! That's exactly what I say. – mike Dec 01 '17 at 12:18
  • perhaps an odd question, but: why are you even offering `eot` at all? That's a dead format that was only supported by IE8 and below, which Microsoft hard-discontinued almost two years ago. – Mike 'Pomax' Kamermans Dec 07 '17 at 00:56
  • I don't offer eot type. The call to https://fonts.googleapis.com/icon?family=Material+Icons sends to IE11 a css with sometimes EOT, sometimes WOFF. – mike Dec 07 '17 at 12:49

1 Answers1

0

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!

mike
  • 395
  • 1
  • 5
  • 12