harshu33 / googlefontdirectory

Automatically exported from code.google.com/p/googlefontdirectory
0 stars 0 forks source link

Multiple fonts don't work in IE with "Display Intranet sites in Compatibility View" #420

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago

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

Original issue reported on code.google.com by ja...@digitaledgeit.com.au on 17 Jul 2015 at 1:40

Attachments: