Allow multiple font weights with @next/font

[verekia]

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.

[jariz]

The same restriction seems to be in place for local fonts, you're required to have a separate font family for each of your font styles. You can't have a single font family with different font styles / weights that live in different files. Seems kind of arbitrary? This does not exactly result in very clean CSS.

I really want to keep using font-family: var(--my-font); font-weight: bold; font-style: italic;, and not have to resort to font-family: var(--my-font-bold-italic) etc...

[vigneshshiv]

As the Font API docs stated, weight: '600' or '100 900' weights can be used in the range of values. But it's not the case, currently it is supported only one to allowed.

[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.

[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',
    },
  ],
})

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.