Recently I answered a question on StackOverflow regarding the use of Google's Web Font API. The root of the question, posted by symlynk, was asking why it was necessary to add the extra font styles (700 size, bold, italic, etc) to the API link, when simply changing the CSS style to font-style: italic or using <i> would do the same thing.
My answer was that even though the browser will attempt to create these styles for you, it doesn't always do a great job. I referenced a List Apart article on the subject, but I wanted to run a couple experiments on my own to see how it worked.
I came up with three situations specifically that show why it's a good idea to specifically include each of the fonts you want to use.
Small Changes for Space
Many fonts, including Google Web Fonts, are created with certain limitations in mind. For instance, perhaps the lowercase "a" created for the typeface looks great and is well-aligned when the font is normally styled, but when put italicized it creates space issues. In these types of situations, small changes will be made to certain parts of the font to make sure it looks good no matter how it's styled.
Take the Fondamento font for example.
Adding this font to my website, I would add the link to the HTML:
<link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'>
Then I would declare the font family in my CSS:
html {font-family: 'Fondamento', cursive;}
And I would see my font looking something like this:
Now if I wanted to italicize this font using CSS, I would add:
font-style:italic;
Since I have not added the italicized version of the font to my linked fonts, the browser will attempt to do this for me.
This looks alright, but when text is styled with bolds and italics, the most intricate parts of the font can have trouble staying legible. To compensate for this, the font creator has made an italicized version that will make some small adjustments.
Notice the "a"'s? Using the simpler version allows the italicized version added readability. Little bits like this can make a huge impact on the readability of your website, and is alone worth adding the extra fonts.
Entirely new fonts
Sometimes the font is so specifically designed for the space that it fills, that the creator of the font would just assume recreate the font entirely for different styles. A good example of this is the Libre Baskerville font.
Here is the plain font without added styles:
Now, let's italicize it using only CSS:
Again, this looks ok, but it is hard to argue that I would achieve the emphasis you may want for your description or header. Let's try again, but this time adding the extra italic font.
What a difference! Not only is it easier to look at, but it gives you more emphasis instantly. The font was completely redone to make the italic version look as strong as the unstyled one.
Smearing
Smearing occurs when you have an intricate font you are trying to bold and the browser has trouble making out the correct changes. This is extremely well described in the List Apart article I mentioned earlier and it occurs more when using your own fonts with @font-face, so I'll keep this area short.
Here is a bolded version of the Diplomata font that is using the correct bolded version of the font.
Notice how the edges look crisp and the font still maintains its look even with the bold styling. This is because it was designed as such. Now let's look at that same font, but instead it is using only the normal font, letting the browser create the bolded effect.
See how the lines blur and bleed? It is difficult for the browser to make these kinds of decisions, especially considering so many of them are primarily aesthetic.
Conclusion
Unless you are absolutely sure you won't be using styled fonts, always include the the fonts you want to use in Google Web Fonts API. The speed increase you get from only including the normal font is only helpful if it doesn't compromise the look and feel of your website.
