proper font fallback support (fixes #1041)

terminus-terminal/src/components/appearanceSettingsTab.component.pug

@@ -96,7 +96,7 @@ h3.mb-3 Appearance
     div
         .form-group
             .appearance-preview(
-                [style.font-family]='config.store.terminal.font',
+                [style.font-family]='getPreviewFontFamily()',
                 [style.font-size]='config.store.terminal.fontSize + "px"',
                 [style.background-color]='(config.store.terminal.background == "theme") ? null : config.store.terminal.colorScheme.background',
                 [style.color]='config.store.terminal.colorScheme.foreground',

terminus-terminal/src/components/appearanceSettingsTab.component.ts

@@ -8,6 +8,7 @@ import { Component, Inject } from '@angular/core'
 import { ConfigService, HostAppService, Platform, ElectronService } from 'terminus-core'
 import { TerminalColorSchemeProvider } from '../api/colorSchemeProvider'
 import { ITerminalColorScheme } from '../api/interfaces'
+import { getCSSFontFamily } from '../utils'
 
 /** @hidden */
 @Component({
@@ -98,4 +99,8 @@ export class AppearanceSettingsTabComponent {
     colorsTrackBy (index) {
         return index
     }
+
+    getPreviewFontFamily () {
+        return getCSSFontFamily(this.config.store.terminal.font)
+    }
 }

terminus-terminal/src/frontends/htermFrontend.ts

@@ -1,5 +1,6 @@
 import { Frontend, ISearchOptions } from './frontend'
 import { hterm, preferenceManager } from './hterm'
+import { getCSSFontFamily } from '../utils'
 
 /** @hidden */
 export class HTermFrontend extends Frontend {
@@ -59,7 +60,7 @@ export class HTermFrontend extends Frontend {
         this.configuredLinePadding = config.terminal.linePadding
         this.setFontSize()
 
-        preferenceManager.set('font-family', `"${config.terminal.font}", "monospace-fallback", monospace`)
+        preferenceManager.set('font-family', getCSSFontFamily(config.terminal.font))
         preferenceManager.set('enable-bold', true)
         // preferenceManager.set('audible-bell-sound', '')
         preferenceManager.set('desktop-notification-bell', config.terminal.bell === 'notification')

terminus-terminal/src/frontends/xterm.css

@@ -172,6 +172,11 @@
 
 /*----*/
 
+@font-face {
+    font-family: "monospace-fallback";
+    src: url(../fonts/Meslo.otf) format("opentype");
+}
+
 .xterm-viewport::-webkit-scrollbar {
     background: rgba(0, 0, 0, .125);
 }

terminus-terminal/src/frontends/xtermFrontend.ts

@@ -1,5 +1,6 @@
 import { Frontend } from './frontend'
 import { Terminal, ITheme } from 'xterm'
+import { getCSSFontFamily } from '../utils'
 import { FitAddon } from './xtermAddonFit'
 import { enableLigatures } from 'xterm-addon-ligatures'
 import { SearchAddon, ISearchOptions } from './xtermSearchAddon'
@@ -179,7 +180,7 @@ export class XTermFrontend extends Frontend {
             }
         })
 
-        this.xterm.setOption('fontFamily', `"${config.terminal.font}", "monospace-fallback", monospace`)
+        this.xterm.setOption('fontFamily', getCSSFontFamily(config.terminal.font))
         this.xterm.setOption('bellStyle', config.terminal.bell)
         this.xterm.setOption('cursorStyle', {
             beam: 'bar'

terminus-terminal/src/utils.ts

@@ -7,3 +7,11 @@ export const WIN_BUILD_WSL_EXE_DISTRO_FLAG = 17763
 export function isWindowsBuild (build: number): boolean {
     return process.platform === 'win32' && parseFloat(os.release()) >= 10 && parseInt(os.release().split('.')[2]) >= build
 }
+
+export function getCSSFontFamily (fontList: string): string {
+    let fonts = fontList.split(',').map(x => x.trim().replace(/"/g, ''))
+    fonts.push('monospace-fallback')
+    fonts.push('monospace')
+    fonts = fonts.map(x => `"${x}"`)
+    return fonts.join(', ')
+}