How can I use Google's Roboto font on a website?
css, fonts, html
Solution
You don't really need to do any of this.
- Go to Google's Web Fonts page
- search for `Roboto` in the search box at the top right
- Select the variants of the font you want to use
- click 'Select This Font' at the top 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.
Problem
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: - I have css in my `media/css/main.css` url. So where do I need to put that folder? - Do I need to extract all eot,svg etc from all sub folder and put in `fonts` folder? - 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`