search

rohanray / next-fonts

Import fonts in Next.js (supports woff, woff2, eot, ttf, otf & svg)
179 stars 12 forks source link

Suggestion to update documentation: #5

Closed JBongars closed 5 years ago

JBongars commented 5 years ago

next-fonts does not work when you include font-face inside a global scss tag. I.e.

Doing this will not work:-

:global {
  @font-face {
    font-family: "SomeFont";
    src: url("./fonts/SomeFont-Bold.otf") format('opentype');

    src: url("./fonts/SomeFont-Bold.woff") format("woff"),
    url("./fonts/SomeFont-Bold.ttf") format("truetype"),
    url("./fonts/SomeFont-Bold.eot") format("eot"),
    url("./fonts/SomeFont-Bold.svg") format("svg");
    font-weight: normal;
    font-style: normal;
  }
}

Please add to documentation

Cheers

rohanray commented 5 years ago

@JBongars Please share a minimal repro

kikoanis commented 5 years ago

Most likely in this case is that you need to include font loader before Css/Sass loader. I included next-fonts before next-css and it loaded fonts correctly.

Great plugin BTW

rohanray commented 5 years ago

Thanks @kikoanis for digging into this and sharing your feedback :) Closing this for now! Cheers