I am getting this data from the api:

fonts: [
        {
                name: 'DM Sans',
                variations: [
                    {
                        fontWeight: 700,
                        fontStyle: 'normal',
                        url: 'https://fonts.gstatic.com/s/dmsans/v14/rP2Yp2ywxg089UriI5-g7M8btVsD8CnTrLu6-K6h9Q.woff2'
                    },
                    {
                        fontWeight: 500,
                        fontStyle: 'normal',
                        url: 'https://fonts.gstatic.com/s/dmsans/v14/rP2Wp2ywxg089UriCZaSExdy3sGt9zz86FHwyKK58VXh.woff2'
                    }
                ]
            }
        ]

i want to add these fonts in the project to use them.
currently i am till here:

export function fetchFonts(fonts: Font[]) {
    fonts.map((font) => {
        font.variations.map((variant) => {
            const fontFace = new FontFace(font.name, `url(${variant.url})`, {
                weight: variant.fontWeight.toString(),
                style: variant.fontStyle
            })

            fontFace
                .load()
                .then((res) => {
                    // console.log('loopsss', res)
                    document.fonts.add(res)
                })
                .catch((error) => {
                    console.log('loopsss', error)
                })
        })
    })
}

but its not working.
any idea whats the issue?