フォントをReactで動的に設定する

Question

私はさまざまなユーザーが使用するReactアプリケーションを作成しています。各ユーザーには、アプリのレンダリングに使用するGoogleフォントを設定する機能があり、font-familyは、アプリが最初に読み込まれたときに設定された設定呼び出しの一部として返されます。このフォント名はReduxストアに格納されます。私が持っている

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

：私がやりたいのは何

はfont-familyがユーザーによって設定されているものに応じてGoogleからの正しいフォントファイルを要求し、その特定のフォントのためのアプリのCSSに注入することです検索の公正なビットを行って、私はそれがかなり一般的なシナリオのように見えるにもかかわらず達成しようとしているものについて何も見つけることができません。

私はwebfontloaderを見つけました。これは、フォントファイルをフェッチするための正しい方向にあるようです。

Answer 1

回答が非常に単純になりました。

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

をとしてアプリケーションにこのスタイルを適用します：

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

一度font-familycomponentWillReceiveProps()チェックして、その後webfontloaderライブラリを使用しますが、設定によって返されたが実行し、呼び出します