Fontsource with Remix
Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the
Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your
links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own
@font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.
- Install your font:
npm install --save @fontsource/montserrat