In next.js 14 I am exploring implementing next/font/local. Currently I am loading fonts in CSS like this:

  @font-face {
    font-family: 'open-sansregular';
    src:url('/webfonts/open-sans/opensans-variablefont_wdthwght-webfont.woff2') format('woff2'), 
        url('/webfonts/open-sans/opensans-variablefont_wdthwght-webfont.woff') format('woff'),
        url('/webfonts/open-sans/opensans-variablefont_wdthwght-webfont.tff') format('truetype');
    font-display: swap;
  }

If the browser doesnt support woff2 it goes to woff, then to ttf. Does next.js have a way to present a different font format if the browser doesn’t support woff2 ie:

RootLayout:

 import local from 'next/font/local';
 const opensans = local({
   src: [
     {
       path: '../public/webfonts/open-sans/opensans-variablefont_wdthwght-webfont.woff2',
     },
   ],
   variable: '--font-opensans',
 });

So in this example it looks like if your browser doesnt support woff2 your browser is not presented with the opportunity to use woff. In my case ‘sans-serif’ will be served instead of open-sans woff or ttf

tailwind.config.js

 'article-body': ['var(--font-opensans)', 'sans-serif'],

Do I even need to provide support for woff and ttf these days? If I should how do I accomplish that in next.js 14?

I have looked through the next.js app router documentation and it shows how to present multiple fonts / weights but I do not see where it shows how to support multiple browser font formats for a single font.