nuxt/fonts - same font name, different weights

Hey guys, i am trying to use the same font name but different weights. Using local provider.

  fonts: {
    families: [
      { name: 'Mark-WXX', src: '/fonts/mark-wxx-book.woff2', weight: 'normal' },
      { name: 'Mark-WXX', src: '/fonts/mark-wxx.woff2', weight: '800' },
    ],
  },

  fonts: {
    families: [
      { name: 'Mark-WXX', src: '/fonts/mark-wxx-book.woff2', weight: 'normal' },
      { name: 'Mark-WXX', src: '/fonts/mark-wxx.woff2', weight: '800' },
    ],
  },

I am expecting that I can now use tailwind classes like ".font-normal" for the mark-wxx-book.woff2 font and ".font-bold" for mark-wxx.woff2. But it is always showing the normal weight.
Any hint?

Nuxt•15mo ago•

5 replies

mavo

nuxt/fonts - same font name, different weights

Hey guys, i am trying to use the same font name but different weights. Using local provider.

  fonts: {
    families: [
      { name: 'Mark-WXX', src: '/fonts/mark-wxx-book.woff2', weight: 'normal' },
      { name: 'Mark-WXX', src: '/fonts/mark-wxx.woff2', weight: '800' },
    ],
  },

  fonts: {
    families: [
      { name: 'Mark-WXX', src: '/fonts/mark-wxx-book.woff2', weight: 'normal' },
      { name: 'Mark-WXX', src: '/fonts/mark-wxx.woff2', weight: '800' },
    ],
  },

I am expecting that I can now use tailwind classes like ".font-normal" for the mark-wxx-book.woff2 font and ".font-bold" for mark-wxx.woff2. But it is always showing the normal weight.
Any hint?

nuxt/fonts - same font name, different weights

Similar Threads

nuxt/fonts - same font name, different weights

Similar Threads

Similar Threads

Similar Threads