What steps will reproduce the problem?

1. Create a page that uses multiple fonts in a single <link> tag e.g. <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:300,400,700' rel='stylesheet' type='text/css'/>

2. Visit the page in IE (any version) with the "Display Intranet sites in Compatibility View" option on or add the page to the "Websites you've added to Compatibility View" list

What is the expected output? What do you see instead?

The fonts will appear more bold than expected. See attachment.

What version of the product are you using? On what operating system?

Any IE version on Windows 7.

Please provide any additional information below.

Individual font weights aren't being served to IE (like they are being served to Chrome):

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot); }

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot); }

The problem is fixed by individually specifying each font/weight combination as separate <link>s.

    <link href='//fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'/>
    <link href='//fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'/>

IE11 adds the string "MSIE" to the useragent which you might be able to test for