Hello, I'm new here. I'm restarting my web-design studies (I learned basic HTML/CSS two years ago but have been completely out of practice, starting again soon).

I had 3 questions that have been on my mind since re-beginning:

1) Google Web Fonts:

Is it preferable to do the @font-face: url (google web fonts url for that font), or is it preferable to download the font, upload it into your website, and do the @font-face pointing to there?

In other words, is it best to host it on your own site or to let Google host it? What are the pros and cons of each?

2) Divs, widths, padding and borders:

I just want a diagram that shows me these basic things:
Does the 'width' parameter include padding, or does it just control the text-area, with padding being added on the outside of the 'width' area? What about margins?
Are borders aligned to the inside or outside of a div? In other words, if I have a div of 100px with 0px padding, 0px margin, and a 2px width, will the width of the column including the border be 100px or 104px?

3) The Grid System

I just watched a really low quality, mostly-useless video on this topic. Do you guys know of any tutorials/articles that you think explains how to use the grid well?