this is my code ->

<--------------app.js------------->

import {
Josefin_Slab,
Montserrat,
Open_Sans,
Dancing_Script
} from '@next/font/google';


const josefinSlab = Josefin_Slab();
const montserrat = Montserrat();
const openSans = Open_Sans();
const dancingScript = Dancing_Script();



<style jsx global>{html { font-family: ${openSans.style.fontFamily}; } .Josefin_Slab { font-family: ${josefinSlab.style.fontFamily}; } .Montserrat { font-family: ${montserrat.style.fontFamily}; } .Open_Sans { font-family: ${openSans.style.fontFamily}; } .Dancing_Script { font-family: ${dancingScript.style.fontFamily}; }}</style>

<---------------data/fonts.json-------------->
[
"Syncopate",
"Josefin_Slab",
"Montserrat",
"Open_Sans",
"Trade_Winds",
}
how to make this dynamically instead of declaring each font