diff --git a/src/containers/App/index.js b/src/containers/App/index.js
index 118b053e..6da786be 100644
--- a/src/containers/App/index.js
+++ b/src/containers/App/index.js
@@ -133,7 +133,15 @@ class App extends Component {
       getLastMessage,
       enableHistoryInput,
     } = this.props
-    const { expanded } = this.state
+    const { expanded } = this.state;
+
+    const fontFamilyRule = `
+      .RecastApp *,
+      .RecastApp *:after,
+      .RecastApp *:before {
+        font-family: ${preferences.fontFamily}
+      }
+    `;
 
     return (
       <div className="RecastApp">
@@ -148,6 +156,8 @@ class App extends Component {
           href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
         />
 
+        {preferences.fontFamily && (<style>{fontFamilyRule}</style>)}
+
         <Expander
           show={!expanded}
           onClick={this.toggleChat}