How to properly import fonts?

[DaXcess]

I am absolutely loving working with Solid so far, but I do have one issue.
In my index.css file I import a font file using @font-face and with the url './src/fonts/[font].woff2'. However when I build using npm run build I notice that the font file is not being put into the dist/ folder, which causes the font to not exist on the production build.

Am I doing something wrong or is this an issue other people are facing as well?

[ryansolid]

This is most likely the domain of the bundler. Are you using one of the vite starter templates?

[DaXcess]

I created my app using npx degit solidjs/templates/ts [app name] so yes I am using a vite starter template.

[voladelta]

if you still have the problem, then check Vite's guide on how to handle them: https://vitejs.dev/guide/assets.html

[DaXcess]

I'll follow up with Vite about this, seems that even when I force `assetsInclude: ['**/*.woff2'] it still does not add the font file to the output directory.

[binajmen]

@DaXcess any tips to share? looking for something similar to include fontawesome :)

[atk]

You need to include it in your HTML, e.g. through a preload link for vite to detect the usage.

[tonkla]

For newcomers, this NPM package is a good choice, https://github.com/fontsource/fontsource

[aellerton]

Though this is more about vite, I figure others might find the steps useful...

1. Download font of interest
2. Put it under, say, public/fonts/
3. Add code similar to this to app.css (though the below is setup for a variable font)

@font-face {
  font-family: "Quicksand";
  src: url("/fonts/Quicksand-VariableFont_wght.ttf") format("truetype-variations");
  /* variable fonts support this: two values specifies a range */
  font-weight: 300 700;
  font-style: normal;
}

body {
  font-family: Quicksand, sans-serif;
}

4. Done!