Genereally , I am going to echoing Eric in this post, but maybe this will be a little more clear.
Google fonts chief advantages are selection, copy paste styles, and most of all popularity (aka caching). The latter is important to note because if you chose a font that is not so highly used , you are less likely to reap any caching advantages anyway. While goggles font selection is impressive and essentially free of copyright problems, it any one typeface could be dropped at any moment (google has great up time, but ultimately if a font author wants heir typeface off google, google has to comply)
2) SPEAKING OF GOOGLE Search for "css box model" and you will get truly in depth answer. But the GIST of it is. for any BLOCK element EXCEPT TABLES... a padding AND border are ADDED to width. UNLESS width is auto.
Are borders aligned to the inside or outside of a div?
ugh relativity, my man (it's a matter of perception) . But I suppose it if we followed the box model it would SEEM like they are added to the outside, since it adds to the declared dimensions. However, one should note that BG color/images show under transparent borders.
Now tall all of what I said an scrap it. With CSS3 you can determine box sizing ( whether or not padding is part of the size or added to it) and background attachment. Of course , all bets are off if your visitor doesnt have a browser that supports css3.
As an AD I will tell you good idea / bad /bloated execution. Really.
Good idea, because all it's doing is lining things up visually. This is a BASIC principle behind any graph design.
Bad execution, because because in order to do this MOST grid systems out there add to the mark up, make non semantic classes to "push/pull/etc" into a layout framework. WHICH you have to learn to use anyway... so why not just learn CSS and apply a modicum of math? Same deal, no bloat.