Nuxt•4mo ago

how to use a custom local font for the entire application

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?

4 Replies

Cue•4mo ago

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

Zampa•4mo ago

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' },
    ]
  }
})

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

Zampa•4mo ago

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

Nuxt Fonts

Providers - Nuxt Fonts

Font providers are designed to be pluggable and extensible, so no matter your setup you should be able to use an existing provider or write your own.

MuhammadOP•4mo ago

Thanks 🙏

Gaming

Programming

how to use a custom local font for the entire application