Using a specific font by @font-face

Question

my problem is, I want to use a specific font type called (Daniel) which is not supported by google fonts, so I have used (@font-face) and it worked but only for the home page but the other pages which at the site are not working and I can not figure out the reason! Would you help me please to solve this problem?

PS This problem is shown only at Mozilla firefox browser and mobile phones, google chrome is going well!

@font-face {
font-family: 'Daniel';
src: url('Daniel.eot');
src: url('Daniel.eot?#iefix') format('embedded-opentype'),
     url('Daniel.woff') format('woff'),
     url('Daniel.ttf') format('truetype'),
     url('Daniel.svg#Daniel') format('svg');
font-weight: normal;
font-style: normal;

}

and here is the the problem shown at firefox console:

Answer 1

Download font file and then place it somewhere in you project directory and use it like this:

@font-face {
  font-family: 'Steiner Light';
  font-style: normal;
  font-weight: normal;
  src: local('Steiner Light'), url('../fonts/Steinerlight.woff') format('woff');
}

.body{

  font-family: 'Steiner Light' !important;
  font-size: 20px !important;
  font-weight: 900;
  letter-spacing: 1px;
  color: $orange;

}