How can I use Google's Roboto font on a website?

I want to use Google's Roboto font on my website and I am following this tutorial:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

I have downloaded the file which has a folder structure like this:

Now I have three questions:

1. I have css in my media/css/main.css url. So where do I need to put that folder?
2. Do I need to extract all eot,svg etc from all sub folder and put in fonts folder?
3. Do I need to create css file fonts.css and include in my base template file?

The example he uses this

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

What should my url look like, if I want to have the dir structure like:

/media/fonts/roboto

You don't really need to do any of this.

1. Go to Google's Web Fonts page
2. search for Roboto in the search box at the top right
3. click Get font at the top
4. Click Get embed code
5. Click Change styles and choose the weights and character sets you need.

The page will give you a <link> element to include in your pages, and a list of sample font-family rules to use in your CSS.

Using Google's fonts this way guarantees availability, and reduces bandwidth to your own server.