如何从位于后端的文件中向不同的组件添加不同的字体？

Question

我正在使用带有 Sanity 的 NextJS (13) 创建带有类型测试器（测试字体）的网页。 我有多种字体，每种字体都有一个组件。在这个组件中，我使用了带有 contenteditable 的

。我的目标是通过@font-face 为每个组件分配不同的字体。

NextJS 有没有办法给组件动态添加字体？ 我给你链接了它应该做什么的最终视觉效果。

我尝试使用并在其中放置我的@font-face { font-family: '${myFontName}'; src url('${myFontUrl}')} 但它没有用。