React MaterialUI动态字体加载

Question

我们正在构建一个Web应用程序，其中不同的用户会看到不同的颜色，字体，边框宽度等，具体取决于应用程序加载时从数据库中提取的Material UI JSON主题。

问题来自于动态字体。 人们尝试了哪些方法来动态加载主题所需的字体？ 为了清楚起见，一个用户看到的字体可能不同于另一用户看到的字体。

例如，用户一个可能具有以下主题定义： "fontFamily": "'Galaxie', sans-serif"

尽管用户二可能具有以下主题定义： "fontFamily": "'Roboto', Arial, sans-serif"

通常，您将定义一个CSS文件或向HTML添加一行以从服务器加载这些字体。 但是，我们希望用户一仅需下载Galaxie字体，而用户二仅需下载Roboto字体。

我们正在考虑的当前解决方案：

• 只是让所有用户加载所有字体（无法大规模使用）
• 创建一个CSS文件以定义字体，该文件根据哪个用户从服务器请求而动态填充

Answer 1

您可以从此处导入自定义字体。

https://material-ui.com/guides/interoperability/#raw-css