diff --git a/lib/components/header.js b/lib/components/header.js
index dd6f0448..30ee449a 100644
--- a/lib/components/header.js
+++ b/lib/components/header.js
@@ -196,11 +196,7 @@ export default class Header extends Component {
       },
 
       appTitle: {
-        fontSize: '12px',
-        fontFamily: `-apple-system, BlinkMacSystemFont,
-        "Segoe UI", "Roboto", "Oxygen",
-        "Ubuntu", "Cantarell", "Fira Sans",
-        "Droid Sans", "Helvetica Neue", sans-serif`
+        fontSize: '12px'
       },
 
       shape: {
diff --git a/lib/components/tabs.js b/lib/components/tabs.js
index 076a3c81..94ae9c61 100644
--- a/lib/components/tabs.js
+++ b/lib/components/tabs.js
@@ -67,10 +67,6 @@ export default class Tabs extends Component {
     return {
       nav: {
         fontSize: '12px',
-        fontFamily: `-apple-system, BlinkMacSystemFont,
-        "Segoe UI", "Roboto", "Oxygen",
-        "Ubuntu", "Cantarell", "Fira Sans",
-        "Droid Sans", "Helvetica Neue", sans-serif`,
         height: '34px',
         lineHeight: '34px',
         verticalAlign: 'middle',
diff --git a/lib/components/term-group.js b/lib/components/term-group.js
index c702396c..7d751877 100644
--- a/lib/components/term-group.js
+++ b/lib/components/term-group.js
@@ -56,6 +56,7 @@ class TermGroup_ extends Component {
       cursorShape: this.props.cursorShape,
       cursorBlink: this.props.cursorBlink,
       fontFamily: this.props.fontFamily,
+      uiFontFamily: this.props.uiFontFamily,
       fontSmoothing: this.props.fontSmoothing,
       foregroundColor: this.props.foregroundColor,
       backgroundColor: this.props.backgroundColor,
diff --git a/lib/components/terms.js b/lib/components/terms.js
index dbe675d5..b20bc1d5 100644
--- a/lib/components/terms.js
+++ b/lib/components/terms.js
@@ -93,6 +93,7 @@ export default class Terms extends Component {
             cursorShape: this.props.cursorShape,
             cursorBlink: this.props.cursorBlink,
             fontFamily: this.props.fontFamily,
+            uiFontFamily: this.props.uiFontFamily,
             fontSmoothing: this.props.fontSmoothing,
             foregroundColor: this.props.foregroundColor,
             backgroundColor: this.props.backgroundColor,
diff --git a/lib/containers/hyper.js b/lib/containers/hyper.js
index 911884a2..183305bb 100644
--- a/lib/containers/hyper.js
+++ b/lib/containers/hyper.js
@@ -97,13 +97,13 @@ class Hyper extends Component {
   }
 
   template(css) {
-    const {isMac, customCSS, borderColor, maximized} = this.props;
+    const {isMac, customCSS, uiFontFamily, borderColor, maximized} = this.props;
     const borderWidth = isMac ? '' :
       `${maximized ? '0' : '1'}px`;
 
     return (<div>
       <div
-        style={{borderColor, borderWidth}}
+        style={{fontFamily: uiFontFamily, borderColor, borderWidth}}
         className={css('main', isMac && 'mainRounded')}
         >
         <HeaderContainer/>
@@ -140,6 +140,7 @@ const HyperContainer = connect(
     return {
       isMac,
       customCSS: state.ui.css,
+      uiFontFamily: state.ui.uiFontFamily,
       borderColor: state.ui.borderColor,
       activeSession: state.sessions.activeUid,
       backgroundColor: state.ui.backgroundColor,
diff --git a/lib/containers/terms.js b/lib/containers/terms.js
index 755ba7da..dfce7438 100644
--- a/lib/containers/terms.js
+++ b/lib/containers/terms.js
@@ -25,6 +25,7 @@ const TermsContainer = connect(
         state.ui.fontSizeOverride :
         state.ui.fontSize,
       fontFamily: state.ui.fontFamily,
+      uiFontFamily: state.ui.uiFontFamily,
       fontSmoothing: state.ui.fontSmoothingOverride,
       padding: state.ui.padding,
       cursorColor: state.ui.cursorColor,
diff --git a/lib/reducers/ui.js b/lib/reducers/ui.js
index 5111bf46..33537b5e 100644
--- a/lib/reducers/ui.js
+++ b/lib/reducers/ui.js
@@ -40,6 +40,7 @@ const initial = Immutable({
   fontSize: 12,
   padding: '12px 14px',
   fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
+  uiFontFamily: null,
   fontSizeOverride: null,
   fontSmoothingOverride: 'antialiased',
   css: '',
@@ -119,6 +120,10 @@ const reducer = (state = initial, action) => {
             ret.fontFamily = config.fontFamily;
           }
 
+          if (config.uiFontFamily) {
+            ret.uiFontFamily = config.uiFontFamily;
+          }
+
           if (config.cursorColor) {
             ret.cursorColor = config.cursorColor;
           }
diff --git a/website/index.html b/website/index.html
index 8f80450d..24878fa5 100644
--- a/website/index.html
+++ b/website/index.html
@@ -700,6 +700,12 @@
               <td>"Menlo, DejaVu Sans Mono, Lucida Console, monospace"</td>
               <td>The font family to use with optional fallbacks</td>
             </tr>
+            <tr>
+              <td>"uiFontFamily"</td>
+              <td>"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, ..."</td>
+              <td>The font family to use for the UI with optional fallbacks</td>
+            </tr>
+            <tr>
             <tr>
               <td>"cursorColor"</td>
               <td>"#F81CE5"</td>