how to use a custom local font for the entire application

[empty lance]

i have a local font that have 5 types (thing, light, regular, bold. dark)
each one is on a different woff2 file, i want to make my app to use the regular font always and also be able to use any other variation if i wanted to
can someone tell me how i can do that?

[tulip agate]

There are so many resources online that cover this. An example being: https://medium.com/@sawacrow/different-font-weight-files-in-a-single-font-family-6c432a1e8e5a

[severe cargo]

Perhaps try the Nuxt Fonts module. https://fonts.nuxt.com/get-started/configuration

Then you can just point to the woff2 files right in your Nuxt config - something like this:

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    families: [            
      { name: 'Bold Font', src: 'url(https://example.com/font.woff2)', weight: 'bold' },
    ]
  }
})

Or maybe even just use the local provider and point it to the fonts in your /public directory. Sounds like it will pick it up automatically: https://fonts.nuxt.com/get-started/providers#local