search

Chhavi221 / googlefontdirectory

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

Loading both BOLD and REGULAR font in IE8 does not work #9

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Use IE to open:
   http://fonts.googleapis.com/css?family=Vollkorn:regular,bold

   <html>
   <header>
   <link href=' http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'>
   </header>
   <body>
      <span style="font-family:Vollkorn">Vollkorn</span>
      <span style="font-family:Vollkorn; font-weight:bold;">Vollkorn Bold</span>
   </body>
   </html>

Actual Result:
  1. IE use an artificial "bold" font, not the bold variant in ttf.

Expected Result
  1. IE should use the bold variant from ttf

Workaround:
  - Don't load the regular font, ie:
       <link href=' http://fonts.googleapis.com/css?family=Vollkorn:bold' rel='stylesheet' type='text/css'>

  /OR/

  - Use the CSS file from the font directory.

Original issue reported on code.google.com by j16s...@gmail.com on 10 Jun 2010 at 1:09

GoogleCodeExporter commented 9 years ago 
Exact same issue when trying to use Droid Sans regular and bold.

A little surprised this issue has been open for 3+ months. I would like to hope 
that the Google Font Directory would be well supported since so many more 
designers are utilizing and relying on it.

Original comment by matthew....@gmail.com on 20 Sep 2010 at 1:54

GoogleCodeExporter commented 9 years ago 
Another workaround is to call the regular and bold versions in separate link 
requests.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' 
type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:b' rel='stylesheet' type='text/css'>

Certainly not ideal but gets the job done for now with IE7 and 8.

Original comment by matthew....@gmail.com on 20 Sep 2010 at 2:44

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Matthew had a good point there, but I just noticed that Opera will only display 
whichever weight was linked in the last place.

Therefore including the direct @font-face CSS is the only available solution 
for now.

Original comment by fabiomr....@gmail.com on 5 Nov 2010 at 2:54

GoogleCodeExporter commented 9 years ago 
5+ months and the issue is still marked at "new" and unassigned. Even just an 
acknowledgement would go a long way to tell many of us that this a serious 
project or something we should take a step away from in our production work.

Original comment by matthew....@gmail.com on 18 Nov 2010 at 3:07

GoogleCodeExporter commented 9 years ago 
Have been having the same problem with IE and Droid Sans. Working from 
matthew.giacomazzo's solution above, I prefer not to punish non-IE users, so 
came up with this, which also works in Opera (fabiomr.barbosa rightly points 
out that the previous solution causes issues in Opera):

<!--[if !IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:bold,regular" 
rel="stylesheet" />
<![endif]-->
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular" 
rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:bold" 
rel="stylesheet" />
<![endif]-->

Would still prefer the Google API to sort this out though.

Have tested in IE6-8, FF, Chrome and Opera

Original comment by paul.mot...@gmail.com on 5 Jan 2011 at 4:06

GoogleCodeExporter commented 9 years ago 
When opening "http://fonts.googleapis.com/css?family=Droid+Sans:bold,regular" 
in IE8 only the "normal" font weight @font-face declaration seems to be 
returned.  The same seems to apply to other fonts as well.  I'm doing IE 
troubleshooting on a site using two fonts with multiple weights, and this is 
the workaround I'm currently using:

<link href='http://fonts.googleapis.com/css?family=Arvo:regular,italic,bold' 
rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" 
rel="stylesheet" type='text/css' />
<!--[if IE]>
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:bold" rel="stylesheet" type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Arvo:italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Arvo:bold' rel='stylesheet' type='text/css'>
<![endif]-->

I haven't had the opportunity to test it in Opera yet, but it seems to be 
working in IE6-8, FF, Chrome and Safari.

Original comment by ian.thec...@gmail.com on 7 Apr 2011 at 11:08

GoogleCodeExporter commented 9 years ago 
Internet Explorer (prior to version 9) does not support multiple weights for a 
given font family.  This is fixed in IE9 (Standards Mode).

Original comment by dcrossland@google.com on 26 Jun 2011 at 4:57

GoogleCodeExporter commented 9 years ago 
IE7/8 still has enough market-share not to be ignored....

Looking at http://msdn.microsoft.com/en-us/library/ms537503(v=vs.85).aspx shows 
that IE version is included in the user agent.

So a fix would be for IE8 and older to serve @font-face split into multiple 
calls instead of the incomparable combined calls as the above workarounds 
prescribe.

Original comment by soundves...@soundvessel.com on 26 Jun 2011 at 7:51

GoogleCodeExporter commented 9 years ago

Original comment by d.crossland on 27 Jun 2011 at 12:10

GoogleCodeExporter commented 9 years ago 
I'm running into this same problem trying to use the italic and normal versions 
of a font (Vollkorn) on a site I'm developing (in IE 8 - everything is fine in 
FF, haven't tested other versions of IE yet). The workaround (of linking to the 
italic version of the font in a conditional comment after including the main 
version) doesn't seem to help either - the italic font is still rendered 
incorrectly.

When you say "Internet Explorer (prior to version 9) does not support multiple 
weights for a given font family" what do you mean? Does this mean that it won't 
be possible to use the italic and normal version of a font on a given page? Or 
does it mean that the google fonts implementation needs to be updated in some 
way to allow it?

Original comment by kelvin.l...@gmail.com on 1 Sep 2011 at 12:19

GoogleCodeExporter commented 9 years ago 
When you check out the @font-face declaration called by the URL, say Droid Sans 
regular and bold, you get this:
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  [[SRC STUFF HERE]]
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  [[SRC STUFF HERE]]
}

Notice that the `font-family` for regular and bold are *both* "Droid Sans".

If you grab the @font-face kit from FontSquirrel, you'll get this declaration:

@font-face {
    font-family: 'DroidSansRegular';
    [[SRC STUFF HERE]]
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'DroidSansBold';
    [[SRC STUFF HERE]]
    font-weight: normal;
    font-style: normal;
}

Now the `font-family` values are different, "DroidSansRegular" and 
"DroidSansBold". 

I believe this is what they mean by not supporting multiple weights for a font 
family of the same name. 

So the workaround is to declare each bold (and italic) styles as a different 
font-family instead of assuming that `font-weight: bold` and `font-style: 
italic` will take care of that. For Internet Explorer.

But would calling multiple Google Webfonts URLs be enough? The generated CSS 
still calls the same font-family. I'd copy the CSS but change the font-family 
values for each font.

Original comment by sof...@gmail.com on 28 Sep 2011 at 7:55

GoogleCodeExporter commented 9 years ago 
The above commenter is on the right track, but it may not be immediately 
obvious how to determine what to put in those [[SRC STUFF HERE]] placeholders. 
You have to first understand that IE7 and IE8 accept only Embedded OpenType 
(.eot) files in @font-face declarations. You must then also understand that the 
line that GWF gives you to use the fonts:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,700' 
rel='stylesheet' type='text/css'>

simply links to the stylesheet alluded to by the above commenter, and you can 
stick that link in your address bar to access it yourself. However, GWF returns 
different stylesheets to different browsers, so if (for example) you attempt to 
access the link from Firefox, you will receive a stylesheet with only support 
for Web Open Font Format (.woff) files, and you're back at square one.

You must also keep in mind the other half of this bug, which is that GWF only 
serves IE with CSS for the first font requested in each URL.

So, at last, here are the steps to work around this (using my own example of 
attempting to use the Ubuntu font, weights 300 and 700):

1) From within your GWF "Use" page, check the box next to only the first font 
that you want. Below, in the "Add this code to your website" box, copy the link 
in the href attribute:

http://fonts.googleapis.com/css?family=Ubuntu:300

2) Fire up IE7 or IE8 (I've only tested this in IE8, though). Paste the link 
into your address bar and visit it. It should pop up a text editor with the CSS 
you need. Notice that GWF serves IE with CSS for both .woff and .eot versions 
of the font, so this will suffice for all browsers:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_aijTyevf54tkVDLy-dlnPY6323mHUZFJMgTvxaG2iE.eot');
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_aijTyevf54tkVDLy-dlnPY6323mHUZFJMgTvxaG2iE.eot') format('embedded-opentype'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_aijTyevf54tkVDLy-dlnD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}

3) Copy and paste this into your site's CSS file. Remember though, that IE 
can't assign different weights to different fonts with the same name, so let's 
change the name:

@font-face {
  font-family: 'Ubuntu Light';

4) Repeat steps 1 to 3 for each font that you want.

Ensure that throughout your CSS file you refer to the fonts by the custom names 
that you gave them. If you're still getting weird results, it's possible that 
you may need to fiddle with the font-style and font-weight attributes, both in 
your @font-face declarations and anywhere in your CSS that you're using the 
fonts.

I've tested the result of this approach in Firefox 11, Chrome 16, and IE8 on 
Windows XP and in Safari on iOS 5.

Original comment by ben.stri...@gmail.com on 5 Jan 2012 at 11:04

GoogleCodeExporter commented 9 years ago 
For some mobile devices (even including my iPod touch) the google web font is 
not recognized AT ALL if you include both weights in the same link declaration, 
you have to split them up. So I'd recommend splitting them up and letting Opera 
be the odd browser out.

Original comment by flog...@gmail.com on 2 Jul 2012 at 2:32

GoogleCodeExporter commented 9 years ago 
I was having issues using Vollkorn with `font-weight:bold;`, but I used 
`font-weight: 700;` and it worked again.

Original comment by zackk...@gmail.com on 24 Sep 2012 at 10:05

GoogleCodeExporter commented 9 years ago 
Just use lower font weight fonts at higher point of your code and you can use 
same name, for example.:
font-family: 'aaa';
font-weight: 400;
...

font-family: 'aaa';
font-weight: 700;
...

font-family: 'aaa';
font-weight: 900;
...

Original comment by CsCm...@gmail.com on 13 Feb 2013 at 6:46