Fira Sans with next font and different font width

[minor bane]

Hello! I was wondering how I could achieve multiple font widths using @next/font
I've tried the following code:

import { Fira_Sans } from '@next/font/google';

const font100 = Fira_Sans({
  weight: "100",
  subsets: ["latin"],
})
const font200 = Fira_Sans({
  weight: "200",
  subsets: ["latin"],
})
const font300 = Fira_Sans({
  weight: "300",
  subsets: ["latin"],
})
const font400 = Fira_Sans({
  weight: "400",
  subsets: ["latin"],
})
const font400Italic = Fira_Sans({
  weight: "400",
  style: "italic",
  subsets: ["latin"],
})
const font500 = Fira_Sans({
  weight: "500",
  subsets: ["latin"],
})
const font500Italic = Fira_Sans({
  weight: "500",
  style: "italic",
  subsets: ["latin"],
})
const font600 = Fira_Sans({
  weight: "600",
  subsets: ["latin"],
})
const font700 = Fira_Sans({
  weight: "700",
  subsets: ["latin"],
})
const fonts = [font100, font200, font300, font400, font400Italic, font500, font500Italic, font600, font700]

<div className={"tw-min-h-screen tw-h-full tw-flex tw-flex-col " + fonts.map(font => font.className).join(" ")}>

But it turns out that random font family names are generated for each one that cause the others to be ignored by the browser:

Is there any working way to achieve this?

[blissful pelican]

how about adjust the font-weight using another class?

import { Fira_Sans } from '@next/font/google';

const firaFont = Fira_Sans({
  subsets: ["latin"],
})

<div className={`tw-min-h-screen tw-h-full tw-flex tw-flex-col ${firaFont.className} font-thin`}>

[minor bane]

That would require me to use that code everytime I use font-thin though.

Would be a lot better when the font weight definitions would be global for the entire font family.