I’m currently using the google.com/webfonts service for this latest web development build, more specifically ‘Open Sans’.
I need the use of multiple font-weight variants from light, regular, semibold and bold to produce what I’ve achieved in the photoshop file.
I opted for the standard inclusion linking the following into my header: <link href=‘http://fonts.googleapis.com/css?family=Open+Sans:400,300,700’ rel=‘stylesheet’ type=‘text/css’>
Integrating the font is simple using the CSS declaration of font-family: ‘Open Sans’; on the body style.
But after this threw me something I’ve not come across before.
As mentioned before I needed the use of multiple font-weight variants, as google suggests you can use font-weight: 400; or font-weight: 300; etc to choose between the different styles you selected over at google webfonts.
This didn’t work the way I was expecting, this resulted in nothing… the only result was that it seemed to be showing the last @font-face seen within fonts.googleapis.com/css?family=Open+Sans:400,300,700.
The current issue that I can see is that the font-family names are all the same, font-family: “Open Sans”; Reading online this is also creates problems for for IE7 and IE8 users.
The solution I found was to create my own fonts.css and paste the google @font-face’s within it.
I then needed to rename the font-family’s to something more appropriate. For example font-family: “Open Sans Light”, font-family: “Open Sans Bold”; etc.
I then call the specific font-family within my stylesheet for the correct font-weight variant I need.
This seems to do the trick and works as I need.