CODEWITHSUNDEEP
fontsfont-facefont-familygoogle-webfonts
Benoit Rouleau
Benoit Rouleau

Reputation: 31

@font-face: Only using one font-family with different font-weights?

I use the font "Open Sans" for a website I'm working on. Right now I'm using Google Web Fonts to load it but I realized it's not the most reliable way when it randomly began to use the bold 700 version instead of normal 400 (you can check by yourself at http://www.google.com/webfonts/specimen/Open+Sans). Anyways, I would like to change to @font-face and host the font myself, however there's something I don't understand. With Google Web Fonts I'm able to use the same font-family for all the different weights, so I just have this rule to the body element:

font-family:'Open Sans', sans-serif;

and different font-weights on specific elements depending on whether it needs to be light, normal, or bold. But with @font-faces generated by Font Squirrel, it seems you have to specify a different font-family for each different weight, such as 'OpenSansLight', 'OpenSansRegular', etc. Why is that? And is there a way to change that so I don't have to change my whole CSS?

Thank you.

Upvotes: 1

Views: 1191

Answers (1)

Alok Pant
Alok Pant

Reputation: 384

When we load google fonts via cdn it basically loads all the selected font options (lighter, bolder, extra bold)

enter image description here

As you can see all the font-weight for "source code pro" font is loaded.

When you download a font from google. It gives different files for all selected options. This is may be reduce unwanted fonts being loaded (if google makes a single font, then all font-weight options related to the font have to be put in the single file). This causes bigger file size.

This is why it is good to load the files individually. But instead of loading it under names 'OpenSans Regular', 'OpenSans Bold' for eg. you can use 'Open Sans' and assign different font-weights. (but load respective files on respective font-weights).

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Font'),
       url('/fonts/sourcepro.woff2') format('woff2'), 
       url('/fonts/sourcepro.woff') format('woff'),
       url('/fonts/sourcepro.ttf') format('ttf'),
       url('/fonts/sourcepro.eot') format('eot');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 800;
  src: local('Source Code Pro bold'),
       url('/fonts/source-b.woff2') format('woff2'), 
       url('/fonts/source-b.woff') format('woff'),
       url('/fonts/source-b.ttf') format('ttf'),
       url('/fonts/source-b.eot') format('eot');
}

Upvotes: 1

Related Questions