title: How can I use Google's Roboto font on a website?
body: <p>I want to use Google's Roboto font on my website and I am following this tutorial:</p>
  
  <p><a href="http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15" rel="noreferrer">http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15</a></p>
  
  <p>I have downloaded the file which has a folder structure like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Hffqp.png" alt="enter image description here"></p>
  
  <p>Now I have three questions:</p>
  
  <ol>
  <li>I have css in my <code>media/css/main.css</code> url. So where do I need to put that folder?</li>
  <li>Do I need to extract all eot,svg etc from all sub folder and put in <code>fonts</code> folder?</li>
  <li>Do I need to create css file fonts.css and include in my base template file?</li>
  </ol>
  
  <p>The example he uses this</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>What should my url look like, if I want to have the dir structure like:</p>
  
  <p><code>/media/fonts/roboto</code></p>