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

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.

There are TWO approaches that you can take to use licensed web-fonts on your pages:

Font Hosting Services like Typekit, Fonts.com, Fontdeck, etc., provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font. Google even provides this service for free (here is an example for the Roboto font you requested). Typekit is the only service to provide additional font hinting to ensure fonts occupy the same pixels across browsers.

JS font loaders like the one used by Google and Typekit (i.e. WebFont loader) provide CSS classes and callbacks to help manage the FOUT that may occur, or response timeouts when downloading the font.

    <head>
      <!-- get the required files from 3rd party sources -->
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

      <!-- use the font -->
      <style>
        body {
          font-family: 'Roboto', sans-serif;
          font-size: 48px;
        }
      </style>
    </head>

The DIY approach involves getting a font licensed for web use, and (optionally) using a tool like FontSquirrel's generator (or some software) to optimize its file size. Then, a cross-browser implementation of the standard @font-face CSS property is used to enable the font(s).

This approach can provides better load performance since you have a more granular control over the characters to include and hence the file-size.

    /* get the required local files */
    @font-face {
      font-family: 'Roboto';
      src: url('roboto.eot'); /* IE9 Compat Modes */
      src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('roboto.woff') format('woff'), /* Modern Browsers */
      url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    /* use the font */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }

Long story short:

Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.

Source: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

UPDATE

Roboto: Google’s signature font is now open source

You can now manually generate the Roboto fonts using instructions that can be found here.

Old post, I know.

This is also possible using CSS @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}

The src refers directly to the font files, therefore if you place all of them on /media/fonts/roboto you should refer to them in your main.css like this: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

The .. goes one folder up, which means you're referring to the media folder if the main.css is in the /media/css folder.

You have to use ../fonts/roboto/ in all url references in the CSS (and be sure that the files are in this folder and not in subdirectories, such as roboto_black_macroman).

Basically (answering to your questions):

I have css in my media/css/main.css url. So where do i need to put that folder

You can leave it there, but be sure to use src: url('../fonts/roboto/

Do i need to extract all eot,svg etc from all sub folder and put in fonts folder

If you want to refer to those files directly (without placing the subdirectories in your CSS code), then yes.

Do i need to create css file fonts.css and include in my base template file

Not necessarily, you can just include that code in your main.css. But it's a good practice to separate fonts from your customized CSS.

Here's an example of a fonts LESS/CSS file I use:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(In this example I'm only using the ttf) Then I use @import "fonts"; in my main.less file (less is a CSS preprocessor, it makes things like this a little bit easier)

For Website you can use 'Roboto' font as below:

If you have created separate css file then put below line at the top of css file as:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Or if you don't want to create separate file then add above line in between <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

then:

html, body {
    font-family: 'Roboto', sans-serif;
}

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

Long story short:

Roboto: Google’s signature font is now open source

Related

Recent Posts