使用React动态设置字体

Question

我正在制作一个将被各种不同用户使用的React应用程序。每个用户都可以设置他们希望应用呈现的谷歌字体，并且font-family将作为应用最初加载时进行的设置调用的一部分返回。此字体名称存储在Redux存储区中。

我想要做的是根据用户设置的font-family请求Google提供正确的字体文件，然后将其注入应用程序的css中以获取该特定字体：

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'set-font', helvetica, sans-serif;
}
p, div {
  font-family: 'set-font', helvetica, sans-serif;
}

我已经做了很多搜索，但我找不到任何关于我想要实现的内容，尽管它看起来像是一个相当常见的场景。

我遇到了webfontloader这似乎是获取字体文件的正确方向的一步。

Answer 1

答案最终很简单。

使用webfontloader库，然后在设置调用返回componentWillReceiveProps()后font-family检查，然后运行：

WebFont.load({
  google: {
    families: ['font-family-from-settings-call']
  }
});

将此样式应用于app：

const appStyle = {
  fontFamily: 'font-family-from-settings-call'
};