Fonts with multiple weights aren't loaded in older version of Internet Explorer (IE6,7,8) [#1867978]

I'm using Open Sans for titles (h3, h4...) and I'd like to have a different weight for each (800 for h3, 300 for h4).
Doing this works fine on recent browsers but fails on older version of IE (6,7,8) and the h3 gets only the 300 weight.

If I inspect the CSS file received for IE8 I have only one font:

@font-face {
	font-family: Open Sans;
	src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
}

While in IE9 I receive multiple weights:

@font-face {
	font-family: Open Sans;
	src: local("Open Sans Light"), local("OpenSans-Light"), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXZ2MAKAc2x4R1uOSeegc5U.eot) format("embedded-opentype"), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format("woff");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: Open Sans;
	src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnZ2MAKAc2x4R1uOSeegc5U.eot) format("embedded-opentype"), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) format("woff");
	font-weight: 800;
	font-style: normal;
}

This seems to be a limit of Google Fonts but it seems there's a way to deal with this.

Is there a workaround in font-your-face ?

Comments

Comment #1

sreynen commented 17 December 2012 at 19:24

Component:	Google Fonts (provider)	» Documentation
Category:	bug	» feature

The linked solution is essentially "use a different provider." We can already do this with the module as-is, so I think we should just add some documentation suggesting this approach for Open Sans and any other fonts Google splits like that. Anyone want to add a child page to http://drupal.org/node/1286960 for this?

Comment #2

grimal commented 16 July 2013 at 12:32

Instead of using a different provider i've found another solution for the problem on stack overflow: http://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work... (second solution)

This is the fix for the google_fonts_api_preprocess_html function:

// ...
else {
  $base = 'http://fonts.googleapis.com/css?family=';

  if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') {
    $base = 'https://fonts.googleapis.com/css?family=';
  } // if

  // separate variants for IE lte 8
  foreach($paths as $family => $variants) {
    foreach($variants as $variant) {
      $url = $base . urlencode($family) . ':'. $variant . '&subset=' . implode(',', $all_subsets);
      drupal_add_css($url, array('type' => 'external', 'group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE),));
    }
  }

  // Real browsers
  $url = $base . implode('|', $families) . '&subset=' . implode(',', $all_subsets);
  drupal_add_css($url, array('type' => 'external', 'group' => CSS_THEME, 'browsers' => array('IE' => 'gt IE 8', '!IE' => TRUE),));    

} // else