Font optimization

[devout gull]

Hello,
I'm trying to optimize fonts with an efficient cache policy required by lighthouse, I'm wondering how to do this with Remix?

I currently load fonts like this in a main.css file:

@font-face {
  font-family: "Frutiger";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/fonts/FrutigerLTW01-55Roman.woff2") format("woff2");
  font-display: swap;
  /* Chrome 26+, Opera 23+, Firefox 39+ */
}

@font-face {
  font-family: "Frutiger-Bold";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("/fonts/FrutigerLTW01-65Bold.woff2") format("woff2");
  font-display: swap;
  /* Chrome 26+, Opera 23+, Firefox 39+ */
}

[open osprey]

Remix App Server serve all files in the public folder with 1 hour cache, and files in public/build with 1 year cache

This is because your files in public/build have a fingerprint hash but other files don't

If you know your fonts aren't gonna change while keeping the same file name you can eject to Express and configure the cache for public/fonts to be 1 year

You can eject to Express using npx rmx-cli eject-ras