remix: [Bug]: font files are not moved to `_assets` directory on build

What version of Remix are you using?

1.1.1

What version of Node are you using? Minimum supported version is 14.

14.18.1

Steps to Reproduce

Run yarn create remix to create a new remix project.
Install a fontsource package in this project, e.g: yarn add @fontsource/aguafina-script
Create the main style sheet: (source)

/* app/styles/main.css */
body { font-family: "Aguafina Script"; }

Add the font style sheet and the main style sheet to root.tsx: (source)

// ...
import fontStyleUrl from "@fontsource/aguafina-script/index.css";
import mainStyleUrl from "~/styles/main.css";

export let links: LinksFunction = () => {
  return [
    { rel: "stylesheet", href: fontStyleUrl },
    { rel: "stylesheet", href: mainStyleUrl }
  ]
}
// ...

Run the development server: yarn dev and visit the page in you browser.

Expected Behavior

Font files (*.woff or *.woff2) from the fontsource package are copied to the _assets folder. Also, the compiled version of the fontsource css points to these font files.

Actual Behavior

Font files are not copied to the _assets folder. Browser receives HTTP 404 when trying to load the font.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 20
Comments: 20 (2 by maintainers)

Most upvoted comments

@mcansh I’ve created a plugin which (hopefully) does the job… I’ve tried to touch as less as possible and recycle as many build options as possible #4130

KingSora on Sep 3, 2022

If you are using PrimeIcons with PrimeReact then the script is…

Unix:

"build": "remix build && npm run install:fonts",
"postinstall": "remix setup node && npm run install:fonts",
"install:fonts": "rsync -r node_modules/primeicons/fonts/ public/build/_assets/fonts/",

Windows:

npm install copyfiles

"build": "remix build && npm run install:fonts",
"postinstall": "remix setup node && npm run install:fonts",
"install:fonts": "copyfiles -u 3 "./node_modules/primeicons/fonts/*" ./public/build/_assets/fonts/",

melloware on Jun 28, 2022

I found the following workaround on the Remix Discord (credit goes to @kiliman): https://discord.com/channels/770287896669978684/940920958540197889/941007998388690985

For those who don’t want to / can’t follow the Discord link, add this to your package.json to copy the font files to the bulid folder (change poppins to the name of the font you use):

"build": "remix build && npm run install:fonts",
"postinstall": "remix setup node && npm run install:fonts",
"install:fonts": "rsync -r node_modules/@fontsource/poppins/files/ public/build/_assets/files/"

akbo on Mar 2, 2022

Using the local font from npm is one of the methods described in MUI’s docs: https://mui.com/components/typography/#install-with-npm

I would expect this to work out of the box with Remix.

synaptiko on Feb 5, 2022

looks like this is what we need to do: https://github.com/evanw/esbuild/issues/1757#issuecomment-963133064 looking into it 😃

mcansh on Aug 30, 2022

@sergioarieljuarez if 1.7.3 didn’t work for you here, please open a new issue and provide a public repository reproducing the problem 🙏

machour on Oct 30, 2022

We’re actually rebuilding the Fontsource website with Remix so this is huge. Thank you so much for giving up your time for this @mcansh and @KingSora!

ayuhito on Sep 7, 2022

ties-v on Dec 19, 2021