使用React动态设置字体

时间:2017-04-15 05:37:51

标签: css reactjs fonts google-fonts

我正在制作一个将被各种不同用户使用的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这似乎是获取字体文件的正确方向的一步。

1 个答案:

答案 0 :(得分:1)

答案最终很简单。

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

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

将此样式应用于app:

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