Как правильно подключить много локальных шрифтов в Next.JS 13 версии

Пытаюсь разобраться с новой фичей Next.JS 13 версии Optimizing Fonts. В документации говорится что можно подключить несколько файлов для одного семейства шрифта. Но не показан пример как использовать это все семейство.

Я у себя в Коде сделал вот так

    import localFont from '@next/font/local';
    
    const TacticRound = localFont({
        src: [
            {
                path: '../public/fonts/tacticRound/TacticRound-Med.woff2',
                weight: '500',
                variable: "--font-tacticRound-Med",
            },
            {
                path: '../public/fonts/tacticRound/TacticRound-Reg.woff2',
                weight: '400',
                variable: "--font-tacticRound-Reg",
            },
        ],
    });
export default function MyApp({ Component, pageProps }) 

    return (
        <ModalsProvider>
            <style jsx global>{`
                :root {
                    --font-tacticRound: ${TacticRound.variable};
                }
            `}</style>
            <GAEventsProvider>
                {pageLoading ? <Loader /> : <Component {...pageProps} />}
            </GAEventsProvider>
        </ModalsProvider>
    );
}

Кто может подсказать как правильно получить именно в CSS шрифт с весом 400 и 500 по отдельности?