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

by

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:

enter image description here

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

14 Answers
14

Leave a Comment