动态访问 Next.js 优化字体

Question

我当前正在使用 json 文件来确定要为我的 Next.js 站点导入哪些字体。Next.js 已经优化了谷歌字体，您可以在本地导入，这比我自己进行谷歌导入具有更好的性能。然而，导入这些字体类的方式似乎要求您知道正在使用的字体。

import { Inter, Lora, Lato, Abril_Fatface } from 'next/font/google'

我想弄清楚是否有一种方法可以根据通过 json 文件传递​​的字体动态导入该函数。

我尝试导入所有字体

import * as exports from 'next/font/google'
const inter = exports.Inter({ subsets: ['latin'] })

但我收到“字体加载器不能导入命名空间”的错误

当我只需要使用 json 确定的字体时，有什么办法可以避免导入每种字体并为所有字体创建变量吗？

这是当前用于导入每个的代码

import {
    Inter,
    Lora,
    Abril_Fatface,
    Lato,
    Alegreya_Sans,
    Alegreya_Sans_SC,
    Amatic_SC,
    Anton,
    Artifika,
    
} from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

const lato = Lato({ weight: ['300', '400', '700'], style: ['normal', 'italic'], subsets: ['latin'], variable: '--lato' })
const lora = Lora({ subsets: ['latin'], variable: '--lora' })
const abril_flatface = Abril_Fatface({ weight: ['400'], style: ['normal'], subsets: ['latin'], variable: '--abril' })

const alegreya_sans = Alegreya_Sans({ weight: ['300', '400', '700'], subsets: ['latin'] })
const alegreya_sans_sc = Alegreya_Sans_SC({ weight: ['300', '400', '700'], subsets: ['latin'] })
const amatic_sC = Amatic_SC({ weight: ['400', '700'], subsets: ['latin'] })

const anton = Anton({ weight: ['400'], subsets: ['latin'] })
const artifika = Artifika({ weight: ['400'], subsets: ['latin'] })