search

insin / nwb

A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
Other
5.57k stars 331 forks source link

Importing Fonts not detected #471

Closed motleydev closed 6 years ago

motleydev commented 6 years ago

This issue is a:

I'm declaring some fonts in my main App.css file with the following declaration:

@font-face {
  font-family: "Playfair Display Bold";
  src: url("./assets/fonts/Playfair_Display/PlayfairDisplay-Bold.ttf") format("truetype");
}

If I run the build command, the files get copied as I'd expect. If I run the dev version there's seemingly no font found. No errors, no console messages, but the font is simply not detected when I use font-family: "Playfair Display Bold";

Node & NWB Versiom

Node 10.1
nwb 0.21.5
insin commented 6 years ago

If the font file is getting copied over ok, what does the generated CSS in your dist/ dir look like?

Created an example project to try this and it seemed to work ok (in nwb v0.21.5 and the latest v0.23.0) - am I doing anything different?

Repo: https://github.com/insin/nwb-examples/tree/master/importing-fonts Live version: https://laughing-joliot-0d61f4.netlify.com/

motleydev commented 6 years ago

So dumb. :) I saw the minified css file and it looks more or less ok. I decided to grab a chunk that had my font-face declarations to get a closer look and reformat it. I had changed my editor syntax highlight to scss so that I could better view my postcss rules. What I didn't realize at the time was that when I was adding comments with scss as the "language", it was using double-slash style, which then broke my stylehseet. :) Sorry for the confusion.