動態設置字體與反應

Question

我正在製作一個React應用程序，將由各種不同的用戶使用。每個用戶都可以設置他們希望應用呈現的谷歌字體，並且將會返回font-family作爲應用最初加載時進行的設置調用的一部分。該字體名稱存儲在Redux商店中。

我希望做的是請求從谷歌正確的字體文件取決於什麼font-family是由用戶設置，然後注入到應用程序的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'] 
    } 
}); 

而且適用這種風格的應用程序：

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