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.

Answer 2

Any reason why you're downloading the font? If you're using it in a web site you can just use the @import code given by Google.

The checkboxes choosing the variations at the beginning only define the import code. If you choose to download the font to your computer it always gives you all variations regardless of the choices you made.

To use the font just include the link to the stylesheet containing the @font-face which google gives you. E.g.

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

or

@import url(http://fonts.googleapis.com/css?family=Roboto);

in your existing stylesheet.

And then it's just a case of setting the font-family for the elements you choose. E.g.

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

Regarding your question :

Yes, you need a separate @font-face for each variation. See example from google

Google example :

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

If you don't include a bold variation for your font the browser will render bolded text as faux-bold instead. This can have variable appearance depending on browser and OS. Likewise for italic and bold-italic.

Answer 3

From your question it looks like your only declaring one font-face rule, related to the Regular version of the Roboto font.

Using the CSS from your question:

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

Will result in the browser faux bolding the font. The reason is, the font-face rule hasn't been included for the bold version of the font. Reference here: http://alistapart.com/article/say-no-to-faux-bold

As others (@yotam, etc) have mentioned (regardless of how the fonts are being served) you would need to declare a font-face rule for each font weight.

@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 */;
}

You would then use that font weight as follows:

body {
    font-family: Roboto, sans-serif;
    font-weight: 400;
}
h1 {
    font-family: Roboto, sans-serif;
    font-weight: 700;
}

I would stress to use the actual font weight value and not font-weight: bold. As mentioned using font-weight: bold leaves the decision down the the browser.

At some point you may use a font with weights of 700, 900. Say 700 is be bold, 900 extra bold. If your declaring font-weight: bold the 900 weight would be used, which isn't the effect you would want.

Answer 4

You don't have to start all over.. if you got @font-face in your style then all you need to add is font-family like you said.

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

And just for make it clear you can make the font as default by using him in body element like this

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

EDIT:

You might considering download your font into your website folder, then instead taking website loading time you'll just have to add the next code to your @font-face:

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

The font should be inside fonts folder and he named font.