Nuxt•10mo ago

I am trying to use the new nuxt fonts module for my font

I use the following setup to load my fonts from file, can someone tell me what could be the issue with this config? As my site looks like this (Image 1), so it's only using the first font, because when moving for example the thin one to the top every text is thin.

const fontPrefix = '/fonts/montserrat-font/Montserrat';
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/image',
    "@nuxt/fonts"
  ],
  image: {
    quality: 80,
    format: ['webp']
  },
  fonts: {
    families: [
      { name: 'Montserrat',  weight: '900', src: fontPrefix + 'Black.ttf' },
      { name: 'Montserrat',  weight: '800', src: fontPrefix + 'ExtraBold.ttf' },
      { name: 'Montserrat',  weight: '700', src: fontPrefix + 'Bold.ttf' },
      { name: 'Montserrat',  weight: '600', src: fontPrefix + 'SemiBold.ttf' },
      { name: 'Montserrat',  weight: '400', src: fontPrefix + 'Regular.ttf' },
      { name: 'Montserrat',  weight: '500', src: fontPrefix + 'Medium.ttf' },
      { name: 'Montserrat',  weight: '300', src: fontPrefix + 'Light.ttf' },
      { name: 'Montserrat',  weight: '200', src: fontPrefix + 'ExtraLight.ttf' },
      { name: 'Montserrat',  weight: '100', src: fontPrefix + 'Thin.ttf' },
    ],
    defaults: {
      weights: [400],
      styles: ['normal']
    },
    providers: {
      google: false,
      bunny: false,
      fontshare: false,
    }
  },
});

const fontPrefix = '/fonts/montserrat-font/Montserrat';
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/image',
    "@nuxt/fonts"
  ],
  image: {
    quality: 80,
    format: ['webp']
  },
  fonts: {
    families: [
      { name: 'Montserrat',  weight: '900', src: fontPrefix + 'Black.ttf' },
      { name: 'Montserrat',  weight: '800', src: fontPrefix + 'ExtraBold.ttf' },
      { name: 'Montserrat',  weight: '700', src: fontPrefix + 'Bold.ttf' },
      { name: 'Montserrat',  weight: '600', src: fontPrefix + 'SemiBold.ttf' },
      { name: 'Montserrat',  weight: '400', src: fontPrefix + 'Regular.ttf' },
      { name: 'Montserrat',  weight: '500', src: fontPrefix + 'Medium.ttf' },
      { name: 'Montserrat',  weight: '300', src: fontPrefix + 'Light.ttf' },
      { name: 'Montserrat',  weight: '200', src: fontPrefix + 'ExtraLight.ttf' },
      { name: 'Montserrat',  weight: '100', src: fontPrefix + 'Thin.ttf' },
    ],
    defaults: {
      weights: [400],
      styles: ['normal']
    },
    providers: {
      google: false,
      bunny: false,
      fontshare: false,
    }
  },
});

9 Replies

danielroe•10mo ago

Yes, this looks like a bug. I think we can track in https://github.com/nuxt/fonts/issues/22.

GitHub

Issues · nuxt/fonts

Plug-and-play web font optimization and configuration for Nuxt apps. - Issues · nuxt/fonts

danielroe•10mo ago

The issue is that you should only have one entry per family, but we need to provide a better way for you to specify the weights -> filename mapping.

GlitchDevOP•10mo ago

Perfect thank you! Looking forward to the fix/ update 😄

GlitchDevOP•10mo ago

Thanks for the fast fix, tho for some reason I can't get it working on my side, I tried updating the packages, using npm update and manually increasing the @nuxt/fonts package version to 0.0.2, then after not working I tried reinstalling all the packages so removing the node_modules folder as well as the package-lock file and running npm i again. But for some reason all my fonts stay at the black weight. Did I make any obvious mistakes? My config still looks like this:

const fontPrefix = '/fonts/montserrat-font/Montserrat';
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/image',
    "@nuxt/fonts"
  ],
  image: {
    quality: 80,
    format: ['webp']
  },
  fonts: {
    families: [
      { name: 'Montserrat',  weight: '900', src: (fontPrefix + 'Black.ttf') },
      { name: 'Montserrat',  weight: '800', src: (fontPrefix + 'ExtraBold.ttf') },
      { name: 'Montserrat',  weight: '700', src: (fontPrefix + 'Bold.ttf') },
      { name: 'Montserrat',  weight: '600', src: (fontPrefix + 'SemiBold.ttf') },
      { name: 'Montserrat',  weight: '400', src: (fontPrefix + 'Regular.ttf') },
      { name: 'Montserrat',  weight: '500', src: (fontPrefix + 'Medium.ttf') },
      { name: 'Montserrat',  weight: '300', src: (fontPrefix + 'Light.ttf') },
      { name: 'Montserrat',  weight: '200', src: (fontPrefix + 'ExtraLight.ttf') },
      { name: 'Montserrat',  weight: '100', src: (fontPrefix + 'Thin.ttf') },
    ],
    defaults: {
      weights: [400],
      styles: ['normal']
    },
    assets: {
      
    },
    providers: {
      google: false,
      bunny: false,
      fontshare: false,
    }
  },
});

const fontPrefix = '/fonts/montserrat-font/Montserrat';
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/image',
    "@nuxt/fonts"
  ],
  image: {
    quality: 80,
    format: ['webp']
  },
  fonts: {
    families: [
      { name: 'Montserrat',  weight: '900', src: (fontPrefix + 'Black.ttf') },
      { name: 'Montserrat',  weight: '800', src: (fontPrefix + 'ExtraBold.ttf') },
      { name: 'Montserrat',  weight: '700', src: (fontPrefix + 'Bold.ttf') },
      { name: 'Montserrat',  weight: '600', src: (fontPrefix + 'SemiBold.ttf') },
      { name: 'Montserrat',  weight: '400', src: (fontPrefix + 'Regular.ttf') },
      { name: 'Montserrat',  weight: '500', src: (fontPrefix + 'Medium.ttf') },
      { name: 'Montserrat',  weight: '300', src: (fontPrefix + 'Light.ttf') },
      { name: 'Montserrat',  weight: '200', src: (fontPrefix + 'ExtraLight.ttf') },
      { name: 'Montserrat',  weight: '100', src: (fontPrefix + 'Thin.ttf') },
    ],
    defaults: {
      weights: [400],
      styles: ['normal']
    },
    assets: {
      
    },
    providers: {
      google: false,
      bunny: false,
      fontshare: false,
    }
  },
});

I will send my packages in the next message because of the length limit.

GlitchDevOP•10mo ago

And my package.json:

{
  "name": "sapphire-games",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/fonts": "^0.0.2",
    "nuxt": "^3.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxt/image": "^1.3.0"
  }
}

{
  "name": "sapphire-games",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/fonts": "^0.0.2",
    "nuxt": "^3.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxt/image": "^1.3.0"
  }
}

danielroe•10mo ago

You should drop all the separate entries in fonts families. Nuxt Fonts should detect it automatically.

GlitchDevOP•10mo ago

Whoa thanks for that fix, I love this community & Framework ❤️

danielroe•10mo ago

you are welcome ❤️

Unknown User•10mo ago

Message Not Public

Gaming

Programming

I am trying to use the new nuxt fonts module for my font