0

I have a Global scss file that have a font-face:

@font-face {
  font-family: "My Font";
  src: url("../../fonts/my-font.ttf");
}

This Global.scss file is imported from different scss files, some of these files are on the same level as the Global file so they can read the font file using "../../fonts/my-font.ttf" but some are one level below and can only access the font file with this ref: "../../../fonts/my-font.ttf"

What is the best solution here that is not considered a workaround?

Thanks

Alex
  • 5,971
  • 11
  • 42
  • 80
  • Not sure so I won't post this as an answer but, can you not import your fonts in the global scss file, then import other files in the global scss ? (instead of importing the global in the others) – Daniel Vafidis Feb 05 '19 at 10:57
  • 2
    Font url makes no sense for Sass, it is only resolved by browser when font is being loaded. So the only requirement for you is to have correct url for font relative to *CSS*, not SCSS. You can, for example, use absolute url (starting from `/`) if it is acceptable – Flying Feb 05 '19 at 11:01
  • Most of the times fonts are added after the preprocessing. So your src should point to a folder inside the processed files/folders. So your style.css (processed scss files) point to example: fonts/my-font.ttf. – Arno Tenkink Feb 05 '19 at 11:01
  • 1
    also maybe when processing the css, after building the react app, you'll only have 1css file in "/css" and fonts in "/fonts" (check in your build folder) so the fonts should be accessible on " /fonts/your-font.ttf "' or "../fonts/your-font.ttf" – Daniel Vafidis Feb 05 '19 at 11:02
  • the thing is I have like 20 css files, I don't want to add the font url in every file – Alex Feb 05 '19 at 11:03
  • The URL in the scss files shouldn't matter as it all gets compiled to one large css file. The link to your font destination should be the same in every file so that your css file can find it once compiled. – MattHamer5 Feb 05 '19 at 11:07
  • Global can import the font using `../../`, for all the files that are on the same level there is no problem what so ever, but for the files that can import the font file using `../../../` I am getting this error: Module not found: Error: Cannot resolve 'file' or 'directory' ../../fonts/my-font.ttf – Alex Feb 05 '19 at 11:44
  • @Flying your suggestion is correct, just add it as an answer to upvote you – Alex Feb 05 '19 at 13:30
  • @AliIssa added, thanks – Flying Feb 05 '19 at 13:59

1 Answers1

1

Font url makes no sense for Sass, it is only resolved by browser when font is being loaded. So the only requirement for you is to have correct url for font relative to CSS, not SCSS.

You can, for example, use absolute url (starting from /) if it is acceptable solution.

Flying
  • 4,422
  • 2
  • 17
  • 25