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; }

Solution 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.

Solution 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.

Solution 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.

Comments

[Royi Namir]

yes there is. google has a problem with mime types compatibility which shows a warning. I had to download the font and register the current mime types.

[Royi Namir]

and BTW - your answer doesnt related to my question but to the way i donload fonts.

[harryg]

It seems there should no longer be an issue regarding MIME types for google fonts on chrome: see stackoverflow.com/questions/3594823/mime-type-for-woff-fonts

[Royi Namir]

well there is because the after changing my iis mime types settings - after getting this error/warning Resource interpreted as Font but transferred with MIME type application/octet-stream - it has been solved.

[harryg]

In addition, warnings in the console regarding MIME types for fonts are usually safe to ignore

[Royi Namir]

when im dealing with ie9 which doesnt work , and i see warnings in chrome , i tend to solve that problem with chrome first , and later deal with IE.

[Royi Namir]

Harry you comment to yotam was all i needed ( and not whether i download or not the fonts)....:-)

[harryg]

I'm glad it helped but I'm still unsure how serving the font locally rather than from Google's servers solves your MIME type issues.

[Magne]

Why not just bold the regular font, instead of downloading and using the Roboto-bold fonts? Won't they look the same? They look pretty much identical to my eye, when testing in the browser.

[Magne]

Nm, I discovered this, and was reminded of the point: alistapart.com/article/say-no-to-faux-bold