导入Google API字体以响应“ preload”属性

Question

我目前正在尝试使用链接标记在react内导入google字体。

如果我将属性“ rel”更改为“ stylesheet”并删除“ as”属性，则该属性有效，但是使用“ preload”不能正确导入字体。两个“ div”中的文本具有相同的字体。我在终端中没有收到错误消息。

为什么会这样，我如何使它工作？

https://jsfiddle.net/ctLgmd2f/13/

或

class Hello extends React.Component {
  render() {
    return (<div>
        <link
        href="https://fonts.googleapis.com/css? family=Baloo+Bhaijaan|Roboto:300,400,500"
    rel="preload"
    as="style"/>
                <div style={{fontFamily: "Roboto"}}>The fonts shouldnt match!</div>
                <div>The fonts shouldnt match!</div>
           </div>);
  }
}

感谢您的任何帮助！