add configurable uifontfamily (#1549)

* add configurable uifontfamily

* rm uifontfamily config default

* fix uifontfamily conf default

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: {

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',

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,

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,

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,

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,

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;
           }

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>