next/font: allow accessing different font weight styles from a single font definition #48781
AleksandrHovhannisyan
started this conversation in
Ideas
Replies: 2 comments
-
I'm facing the same problem! I thought your proposal was very clever. Got my upvote! |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Goals
Allow users to access multiple font weights for a single font family via a single font definition.
Background
I can do this:
And then use those two font variants like so:
I can also specify multiple weights in one config thanks to #41969:
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
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:
And if
NextFont
had this shape:Then I would be able to do this:
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
Beta Was this translation helpful? Give feedback.
All reactions