How to add local fonts to my website?

Sometimes client might ask you to add a font to his/her website that he found or purchased online. Now you have to use this on the website.

Those who like me are used to using Google Fonts or the default fonts on the Computer, this might seem like tricky. But it actually is not.

So, How do we achieve this? By using the @font-face rule of CSS.

First you have to download the font file and put it inside your project folder. The most supported font files are - TTF/OTF, WOFF, and WOFF2.
Now all you have to do is to add this to your CSS and give it a name. This name is what you will use to use the font.
For example,

@font-face {
  font-family: myFirstFont; /*The name you choose goes here*/
  src: url(sansation_light.woff);
}

Thanks for reading.

My Twitter Profile