How do I use .woff fonts for my website?

Question

Where do you place fonts so that CSS can access them?

I am using non-standard fonts for the browser in a .woff file. Let\'s say its \'awesome-font\' stored in a file

Answer 1

You need to declare @font-face like this in your stylesheet

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Now if you want to apply this font to a paragraph simply use it like this..

p {
font-family: 'Awesome-Font', Arial;
}

More Reference