Help with next/font and multiple formats

[JWesorick]

Summary

@font-face allows for multiple formats for the same font-family to support older browsers. Ex. Here it's providing otf & woff.

@font-face {
  font-family: "Trickster";
  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
}

I'm trying to use next/font and provide both woff, woff2, and ttf formats for the same font. But next/font doesn't seem like it supports that? Am I missing something? Thanks for your help.

next/font api reference

Additional information

No response

Example

No response

[MichaelAllenWarner]

Yes, it's strange to me that this isn't supported.

I wonder if the src.path property of the options-object passed to localFont() could be extended to allow for an array of string-paths. I envision something like this:

const myLocalFont = localFont({
  src: [
    {
      path: ['./fonts/my-local-font.woff2', './fonts/my-local-font.woff'],
      weight: '400',
      style: 'normal',
    },
    {
      path: ['./fonts/my-local-font-italic.woff2', './fonts/my-local-font-italic.woff'],
      weight: '400',
      style: 'italic',
    },
  ],
  display: 'swap',
  variable: '--my-local-font',
});

Presumably the order of path-strings in the array would determine their order in the src for the generated @font-face, although maybe an automatic ordering could be feasible (like WOFF2 -> WOFF -> etc.).

Actually, if an automatic ordering were feasible, then it might even be possible to let the user instead point src.path to a directory that contains the multiple formats for that font, and let Next.js take care of ordering them, like:

const myLocalFont = localFont({
  src: [
    {
      path: './fonts/my-local-font', // directory with a WOFF2 and a WOFF file, say
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/my-local-font-italic', // directory
      weight: '400',
      style: 'italic',
    },
  ],
  display: 'swap',
  variable: '--my-local-font',
});

[M-Rb3]

Are there any updates on this?

[blackrock33]

You can try export multiple font varibale/class with different font's src, and use it in font-family by order. I think will work.

// font.ts
const myLocalFont = localFont({
src: "xxx.otf"
}};
const myLocalFont2 = localFont({
src: "xxx.woff",
variable: '--font-myLocalFont2',
}}
const myLocalFont3 = localFont({
src: "xxx.woff2"
}}

export {myLocalFont,myLocalFont2,myLocalFont3};

// layout.tsx / page.tsx
 <div className={myLocalFont2.variable}>
      <p className={myLocalFont.className}>
</div>

// use in css
@font-face {
  font-family: "myLocalFont","myLocalFont2","myLocalFont3"; //or var(--font-myLocalFont2)
}