Changing fonts with @font-face and font-weight

I learned something new today. You probably know that you can import fonts using @font-face in CSS. That might look something like this:

@font-face{
   font-family: ’Custom’;
   font-weight: 600;
   font-style:  normal;
   src:         url(‘url_path/font-one.ttf’);
 }

Here I have defined a my ‘Custom’ font name, the font-weight, the style, and of course the source. Once I have done that I can now refer to that font anywhere in my CSS.

body{
  font-family:’Custom’;
}

Now here is where it gets interesting. Turns out I can define a SECOND font, with the exact same name, but give it different properties.

@font-face{
  font-family: ’Custom’;
  font-weight: 200;
  font-style:  italic;
  src:         url(‘url_path/font-two.ttf’);
 }

This font can be a different version of the same font, or you could make it Wingdings, it works all the same. The cool part is, I have defined a new font with the same name as the one I already defined above. The only differences are that I made my new one with a font-weight of 200 (rather than 600) and a font-style of italic (rather than bold).

Turns out, I can now refer to these properties in my CSS, and they will use the respective font. Meaning that anything that inherits the font-family of ‘Custom’ and has a font-weight of 200 will use font-two.ttf, while anything with a font-weight of 600 will use font-one.ttf.

The same goes for style. You can now refer to font-two.ttf by applying a font-style of italic. That might look something like this (after you have already imported the files as above):

<style>
body{
 font-family:’Custom’;
}
.bold{
 font-weight: 600;
}
.light{
 font-style: italic;
}
</style>
<div class=”bold”>
  This will have FONT-ONE applied.
</div>
<div class=”light”>
  This will have FONT-TWO applied.
</div>