From 956d3dc6b17ea6d4c86f6bd5083e61d87c6c6ee8 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <john.pankov@gmail.com>
Date: Sat, 8 Jun 2019 22:37:05 +0200
Subject: [PATCH] proper font fallback support (fixes #1041)

---
 .../src/components/appearanceSettingsTab.component.pug    | 2 +-
 .../src/components/appearanceSettingsTab.component.ts     | 5 +++++
 terminus-terminal/src/frontends/htermFrontend.ts          | 3 ++-
 terminus-terminal/src/frontends/xterm.css                 | 5 +++++
 terminus-terminal/src/frontends/xtermFrontend.ts          | 3 ++-
 terminus-terminal/src/utils.ts                            | 8 ++++++++
 6 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/terminus-terminal/src/components/appearanceSettingsTab.component.pug b/terminus-terminal/src/components/appearanceSettingsTab.component.pug
index ab5813a1..8c2cc27a 100644
--- a/terminus-terminal/src/components/appearanceSettingsTab.component.pug
+++ b/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',
diff --git a/terminus-terminal/src/components/appearanceSettingsTab.component.ts b/terminus-terminal/src/components/appearanceSettingsTab.component.ts
index 6ce42bbf..3c5545fc 100644
--- a/terminus-terminal/src/components/appearanceSettingsTab.component.ts
+++ b/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)
+    }
 }
diff --git a/terminus-terminal/src/frontends/htermFrontend.ts b/terminus-terminal/src/frontends/htermFrontend.ts
index 1c2db743..1d003b06 100644
--- a/terminus-terminal/src/frontends/htermFrontend.ts
+++ b/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')
diff --git a/terminus-terminal/src/frontends/xterm.css b/terminus-terminal/src/frontends/xterm.css
index 14c7635b..bba9a35c 100644
--- a/terminus-terminal/src/frontends/xterm.css
+++ b/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);
 }
diff --git a/terminus-terminal/src/frontends/xtermFrontend.ts b/terminus-terminal/src/frontends/xtermFrontend.ts
index 5599f9cb..af43f84f 100644
--- a/terminus-terminal/src/frontends/xtermFrontend.ts
+++ b/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'
diff --git a/terminus-terminal/src/utils.ts b/terminus-terminal/src/utils.ts
index 375b4351..8a5d0476 100644
--- a/terminus-terminal/src/utils.ts
+++ b/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(', ')
+}