I am creating react component where in I have created fonts folder inside src folder inside fonts folder I have created


@font-face {
  font-family: FS Lola;
  src: url("/../../../../fonts/FSLola.eot");
  src: url("/../../../../fonts/FSLola.eot?#iefix") format("embedded-opentype"),
    url("/../../../../fonts/FSLola.woff2") format("woff2"), url("/../../../../fonts/FSLola.woff") format("woff"),
    url("/../../../../fonts/FSLola.ttf") format("truetype"), url("/../../../../fonts/FSLola.svg#FSLola") format("svg");
  font-weight: 400;
  font-style: normal;

Then I have imported this in my component scss file

    @import "../../../../fonts/fonts.module.scss";
font-family: "FS Lola, HelveticaNeueLT Arabic, sans-serif" !important;
  text-rendering: optimizeLegibility;
  background-color: #f1f1f1;
  color: #4a4a4a;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  direction: ltr;
  margin: 0;
 .ms-bgColor-green {
    @include ms-bgColor-green;

But correct font is not showing, I trying use that font in my whole component. What I am doing wrong.

Update I found out that woff and woff2 is not supported by SPFx may be I am wrong but it always gives error for loaded

So now I have put in my office 365 public cdn but all woff and woff2 but still its gives error

enter image description here

  • any help will be appriciated – Milind Dec 20 '19 at 18:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.