CSS How to embed several Font-Weights at once

Question

I was using the Open Sans Font-Family from the Google Fonts Library, where you can just use this:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

And it will export all the fonts at once and when you are using Open Sans as Font-Family you can simply put font-weight: XXX and it will automatically use the right font for it.

I downloaded the files directly because we have to use them local now, but it gives me like 10 different fonts for each style and weight (normal, medium, bold, bold italic e.g). I don't want to import them separately and use font-family: Open-Sans-Bold (for example)

Is there any way to import them all at once or tell CSS that it's basically the same Font-Family just a different weight?

I think you should see this question stackoverflow.com/questions/17166060/… — Nibbler

Albzi Albzi · Accepted Answer · 2014-04-10T11:02:42

(Please excuse my example of Comic Sans neue, just something I had laying about)

You have to add them all separate, look at the following code. Each one has a different 'font-weight' and has a new font file (light, regular and bold).

Each font file has a different font-size which means that if you want to add all of them, you'll have to add them all this way (for each one you want).

@font-face {
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 100;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 300;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 700;
}

Calling it is simple after, in your CSS:

p {
    font-family: 'Comic Neue', sans-serif;
    font-weight: 300; /*or 100/700*/
}

Obviously, you'd replace this with Open Sans and the Open Sans font files.

CSS How to embed several Font-Weights at once

1 Answers