Allow multiple font weights with @next/font

Describe the feature you’d like to request

With a <link> to Google Foots, it is possible to request multiple weights for a single font:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

It seems like the @next/font, in version 13.0.0, doesn’t allow multiple weights, it takes a single value.

Describe the solution you’d like

Something like this would be great for instance:

export const roboto = Roboto({ display: 'swap', weight: ['400', '700'] })

Describe alternatives you’ve considered

<link> still works in the meantime.

[hanneslund]

Multiple weights and styles are now available in 13.0.1. Docs are being worked on to reflect the latest updates.

// google
const fira = Fira_Code({ weight: ["400", "700"] })

// local files
const inter = localFont({
  src: [
    {
      path: './inter/Inter-Regular.ttf',
      weight: '400',
    },
    {
      path: './inter/Inter-Bold.ttf',
      weight: '700',
    },
  ],
})

[hanneslund]

If available use a variable font instead. E.g. Roboto Flex.

import { Roboto_Flex } from '@next/font/google'
const roboto = Roboto_Flex({ subsets: ['latin'] })

Support for multiple weights for non variable fonts is coming soon. In the meantime you could use one const per weight.