Using fontsource for self-hosted fonts

[zbcoding]

installed a font from Fontsource using npm i @fontsource/raleway
but I cannot get it to work, either the font doesn't appear or I keep getting a invalid or unexpected token error.

Has anyone used fontsource with Remix Run? I am using Remix Run with Chakra UI.

Do fonts have to be placed in the public folder? The Jokes App tutorial uses fonts this way.

Error:
`D:\Code\Remix api test\my-app\node_modules@fontsource\raleway\index.css:2
@font-face {
^

SyntaxError: Invalid or unexpected token
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (D:\Code\Remix api test\my-app\build\index.js:409:33)
at Module._compile (node:internal/modules/cjs/loader:1101:14)`

[zbcoding]

Would like to add that I got this working by using self hosted .woff font files placed in the public directory. Perhaps fonts installed with npm don't work in remix out of the box?

Edit: Tutorial available

[ianlenehan]

I was able to get the site to load without that error by adding /index.css to the import (import "@fontsource/raleway/index.css";) but I still can't get the fonts to work

[zbcoding]

https://dev.to/coding/using-a-custom-font-with-remix-run-and-chakra-ui-72d

[ianlenehan]

Amazing, thank you! Been trying to work this out all day