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.

enter image description here

So I checked both types and pressed the download button :

enter image description here

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

enter image description here

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

Šime Vidas · Accepted Answer · 2013-06-18T17:21:03.087

10

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.

edited Jun 18 '13 at 17:21

answered Jun 18 '13 at 17:13

Šime Vidas

182,163
62
281
385

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 Mar 26 '14 at 17:36
Nm, I discovered this, and was reminded of the point: http://alistapart.com/article/say-no-to-faux-bold – Magne Mar 26 '14 at 17:48

harryg · Answer 2 · 2013-06-18T11:47:50.703

4

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.

edited Jun 18 '13 at 11:47

answered Jun 18 '13 at 10:17

harryg

23,311
45
125
198

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 Jun 18 '13 at 10:17
and BTW - your answer doesnt related to my question but to the way i donload fonts. – Royi Namir Jun 18 '13 at 10:18
It seems there should no longer be an issue regarding MIME types for google fonts on chrome: see http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts – harryg Jun 18 '13 at 10:26
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. – Royi Namir Jun 18 '13 at 10:29
In addition, warnings in the console regarding MIME types for fonts are usually safe to ignore – harryg Jun 18 '13 at 10:29
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 Jun 18 '13 at 10:30
Harry you comment to yotam was all i needed ( and not whether i download or not the fonts)....:-) – Royi Namir Jun 18 '13 at 10:33
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. – harryg Jun 18 '13 at 11:37

score 1 · Answer 3 · answered Jun 18 '13 at 18:43

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.

copypaste · Answer 4 · 2013-06-18T10:17:19.460

0

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.

edited Jun 18 '13 at 10:17

answered Jun 18 '13 at 10:09

copypaste

175
1
2
13

If I use your first code , Must i also download the Roboto-bold font ? I mean - how will the browser know how to render a bolded font if he doesnt has it... ? – Royi Namir Jun 18 '13 at 10:10
You using src (Source) from a website, if you got source already you don't have to download the font since you already have him in your website. You can download the font and use him as local and save a load time – copypaste Jun 18 '13 at 10:13
Yotam that wasn't my question. I'll rephrase. If I use only `Roboto-Regular` and then do `font-weight:bold` , will the browser know how to render the bold font even if i didnt do : `url('/font-face/Regular/Roboto-bold(!!!!).ttf')` ? – Royi Namir Jun 18 '13 at 10:15
Yotam what makes you think i didnt download the fonts ? I explicitly said (_downloaded rar file _). the fonts are in my solution. my question still remains about whether or not should i use SRC to the bolded version. – Royi Namir Jun 18 '13 at 10:19
It the same, if you use src or local host. But since you have the fonts in local host you should be using them, it saving you loading bettwen the websites. The quailty bettwen SRC and LocalHost will be the same if the font are same. – copypaste Jun 18 '13 at 10:23
Yes, you need a separate `@font-face` for each variation. See example from google: http://fonts.googleapis.com/css?family=Roboto:400,700 – harryg Jun 18 '13 at 10:24
@yotam Does downloading **only** the regular font (not bold) and then do `font-weight:bold` is exactly the same as if i downloaded the pure bolded font version ? – Royi Namir Jun 18 '13 at 10:38
Ofcourse, it will allways be the same unless you change something in the font file. – copypaste Jun 18 '13 at 10:40
@yotam If I can do `font-weight:bold` , why would I ever want to use `Robto-download.ttf` ??? – Royi Namir Jun 18 '13 at 11:40
I don't know, maybe because the new font? – copypaste Jun 18 '13 at 11:44

Import html fonts and their style variations?

4 Answers4

Linked