Import html fonts and their style variations?

Question

I'm implementing google's font named Roboto in my site.

I need 2 types : bold and regular.

So I checked both types and pressed the download button :

But in the downloaded rar file I got ALL the font styles ( also ones which I didn't choose) :

Anyway I wanted to test the regular font : (the fonts are now in my site and not being loaded from google).

(I got those other extensions types (eot,woff,svg) using a font converter (http://www.font2web.com/))

So I did :

 <style type="text/css">

    @font-face {
    font-family: 'Roboto';
    src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
    src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
         url('/font-face/Regular/Roboto-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
    }


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

    </style>

Question :

Let's say I want to apply a Roboto bold style to a div.

Should I do it like this :

 div  { 
       font-family: 'Roboto', sans-serif;
       font-weight:bold
      }

or should I do this ( start all over...)

@font-face {
    font-family: 'Roboto-bold';
    src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
    ...
    }

and then

 div  { font-family: 'Roboto-bold', sans-serif; }

Answer 1

This is what you have to do:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: /* links to the Regular files */;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: /* links to the Bold files */;
}

Notice how the same font name is used in both @font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:

div {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the @font-face rules correctly.