Local fonts with multiple weights but same name

[Jamiewarb]

I can't see it mentioned in the README how this use case would be handled, so I thought I'd open an issue to get it clarified, then I can submit a PR for the docs.

For font faces that have the same name but multiple font-weights, how would we handle the configuration for this?

E.G.

@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-family: 'Tenon';
    src:
        local('Tenon Regular'),
        local('Tenon-Regular'),
        local('TenonRegular'),
        url('/fonts/tenon_regular.woff2') format('woff2'),
        url('/fonts/tenon_regular.woff') format('woff');
}

/* Tenon */
/* Font weight: Medium */
@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    font-family: 'Tenon';
    src:
        local('Tenon Medium'),
        local('Tenon-Medium'),
        local('TenonMedium'),
        url('/fonts/tenon_medium.woff2') format('woff2'),
        url('/fonts/tenon_medium.woff') format('woff');
}

/* Tenon */
/* Font weight: Bold */
@font-face {
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-family: 'Tenon';
    src:
        local('Tenon Bold'),
        local('Tenon-Bold'),
        local('TenonBold'),
        url('/fonts/tenon_bold.woff2') format('woff2'),
        url('/fonts/tenon_bold.woff') format('woff');
}

This has 3 font files for Tenon, but all under the font-family: 'Tenon'. Changing the font-weight lets the browser choose the right font file automatically.

Just wondering how we'd set this up, as well as get the local fallbacks.

Out of the box I just get the 400 weight font files, and no local fallback

[danielroe]

Have you tried creating ~/public/Tenon-500.woff2? We probably need to add support for mapping Medium/Regular/Bold to numeric weights.

[Jamiewarb]

Thanks Dan. Yeah I did, unfortunately it wasn't picked up in the way above

[danielroe]

Someone also reports an issue on discord with the following config:

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,
    }
  },
});

[StevenJPx2]

This doesn't register all of the fonts... I'm not able to fully able to understand what I need to do to have them register.

In the local.ts, it's not fully clear how the weights are resolved. Why not use scule to resolve the font name to kebab-case, then add the value of the weight to eagerly search for the weight name?

Rough POC example:

import { kebabCase } from "scule";

/* ... */

const fontName = /* ... */;

const weight: str = 
  Object.values(weightMap)
  .find(
    (weight) => kebabCase(fontName).includes(weight)
  ) || "normal";

[danielroe]

I would expect all of those to be registered, if you have specified all those weights in your options. Are you on the latest version? Can you prepare a reproduction if so?

[StevenJPx2]

Ah okay... so it doesn't auto register? I was under the impression that it would register from scanning our files? So I'll have to do this? https://github.com/nuxt/fonts/issues/22#issuecomment-1976259640

[danielroe]

It does auto register but by default only 400 weight. You can specify additional weights in fonts.defaults.weights. Or more granularly by font if you wish. You don’t have to specify the font files.

[StevenJPx2]

Worked perfectly! Thank you for your prompt response. Love the work you and your team is doing! ❤️

Waiting with bated breath on nuxt/assets and nuxt/scripts, whenever you're planning on rolling those out!