next/font: allow accessing different font weight styles from a single font definition

[AleksandrHovhannisyan]

Goals

Allow users to access multiple font weights for a single font family via a single font definition.

Background

I can do this:

const interRegular = Inter({ weight: '400', subsets: ['latin'] });
const interBold = Inter({ weight: '900', subsets: ['latin'] });

And then use those two font variants like so:

// 400
interRegular.style.fontWeight
// 900
interBold.style.fontWeight

I can also specify multiple weights in one config thanks to #41969:

const inter = Inter({ weight: ['400', '900'], subsets: ['latin'] });

But now it doesn't make sense for the config to return style.fontWeight because there isn't just one font weight in the config:

next.js/packages/font/src/types.ts

Lines 5 to 8 in 2196cbe

	export type NextFont = {
	className: string
	style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
	}

The current implementation will apply a font weight of 400 and there is no way to access the styles for the other weights.

Similarly, it doesn't make sense for there to be a single class name for a font that may have multiple font weights since you may want to apply bold in one instance and regular/other weights in another.

Proposal

Instead, it would be helpful if the font accepted an object for the weights, maybe like this:

const inter = Inter({
  weights: {
    regular: 400,
    bold: 900,
  },
  subsets: ['latin'],
});

And if NextFont had this shape:

export type NextFont = Record<string,
{
  className: string;
  style: { fontFamily: string; fontStyle?: string; weight: number; }
}>

Then I would be able to do this:

// apply regular weight styles
inter.regular.className
// or just get the weight
inter.regular.style.weight
// or get the weight for bold
inter.bold.style.weight

But in reality, I think the issue is a little more involved than just weights because you can have different font style + font weight combinations. On my personal website (NOT nextjs), I use a JavaScript font definition that looks like this, where each font has multiple variants, and each font variant has its own weight + font style:

https://github.com/AleksandrHovhannisyan/aleksandrhovhannisyan.com/blob/6cecb867140164d02c71cbed0863cda6101603d5/src/_data/fonts.js#L8-L40

[AleksandrHovhannisyan]

Bump

[joaodellarmelina]

I'm facing the same problem!

I thought your proposal was very clever.

Got my upvote!