diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index 97a2057ed2..5669319d75 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -9,7 +9,6 @@ @import "~flex.box"; @import "../themes/theme-vars"; -@import "./fonts"; :root { --unit: 8px; @@ -17,7 +16,8 @@ --margin: var(--unit); --border-radius: 3px; --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif; - --font-monospace: Lucida Console, Monaco, Consolas, monospace; + --font-monospace: Lucida Console, Monaco, Consolas, monospace; // some defaults + --font-terminal: var(--font-monospace); // overridden in terminal.ts --font-size-small: calc(1.5 * var(--unit)); --font-size: calc(1.75 * var(--unit)); --font-size-big: calc(2 * var(--unit)); @@ -227,6 +227,19 @@ a { } } +// import and preload all bundled fonts +@import "fonts"; + +#fonts-preloading { + > .icons { + @include font-preload("Material Icons"); + } + + > .terminal { + @include font-preload("RobotoMono"); + } +} + // app's common loading indicator, displaying on the route transitions #loading { position: absolute; diff --git a/src/renderer/components/dock/terminal/terminal.ts b/src/renderer/components/dock/terminal/terminal.ts index fa93c68c79..991e7e232e 100644 --- a/src/renderer/components/dock/terminal/terminal.ts +++ b/src/renderer/components/dock/terminal/terminal.ts @@ -64,16 +64,26 @@ export class Terminal { } } - constructor(protected readonly dependencies: TerminalDependencies, { tabId, api }: TerminalArguments) { + get fontFamily() { + return this.dependencies.terminalConfig.get().fontFamily; + } + + get fontSize() { + return this.dependencies.terminalConfig.get().fontSize; + } + + constructor(protected readonly dependencies: TerminalDependencies, { + tabId, + api + }: TerminalArguments) { this.tabId = tabId; this.api = api; - const { fontSize, fontFamily } = this.dependencies.terminalConfig.get(); this.xterm = new XTerm({ cursorBlink: true, cursorStyle: "bar", - fontSize, - fontFamily, + fontSize: this.fontSize, + fontFamily: this.fontFamily, }); // enable terminal addons this.xterm.loadAddon(this.fitAddon); @@ -100,12 +110,8 @@ export class Terminal { }, { fireImmediately: true, }), - reaction(() => this.dependencies.terminalConfig.get().fontSize, this.setFontSize, { - fireImmediately: true, - }), - reaction(() => this.dependencies.terminalConfig.get().fontFamily, this.setFontFamily, { - fireImmediately: true, - }), + reaction(() => this.fontSize, this.setFontSize, { fireImmediately: true, }), + reaction(() => this.fontFamily, this.setFontFamily, { fireImmediately: true, }), () => onDataHandler.dispose(), () => this.fitAddon.dispose(), () => this.api.removeAllListeners(), @@ -201,8 +207,11 @@ export class Terminal { this.xterm.options.fontSize = size; }; - setFontFamily = (family: string) => { - this.xterm.options.fontFamily = family; + setFontFamily = (fontFamily: string) => { + this.xterm.options.fontFamily = fontFamily; + + // provide access to current terminal-font in css in :root {} + document.documentElement.style.setProperty("--font-terminal", fontFamily); }; keyHandler = (evt: KeyboardEvent): boolean => { diff --git a/src/renderer/components/fonts.scss b/src/renderer/components/fonts.scss index fc594561d8..91b65bc7c4 100644 --- a/src/renderer/components/fonts.scss +++ b/src/renderer/components/fonts.scss @@ -3,9 +3,6 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ -// Custom fonts -@import "~typeface-roboto/index.css"; - // Material Design Icons, used primarily in icon.tsx // Latest: https://github.com/google/material-design-icons/tree/master/font @font-face { @@ -13,24 +10,59 @@ font-style: normal; font-weight: 400; font-display: block; - src: url("./fonts/MaterialIcons-Regular.ttf") format("truetype"); + src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype"); +} + +// Terminal fonts (monospaced) +// Source: https://fonts.google.com/?category=Monospace +@font-face { + font-family: 'Anonymous Pro', monospace; + src: local('Anonymous Pro'), url('../fonts/AnonymousPro-Regular.ttf') format('truetype'); + font-display: block; +} + +@font-face { + font-family: 'IBM Plex Mono', monospace; + src: local('IBM Plex Mono'), url('../fonts/IBMPlexMono-Regular.ttf') format('truetype'); + font-display: block; +} + +@font-face { + font-family: 'JetBrains Mono', monospace; + src: local('JetBrains Mono'), url('../fonts/JetBrainsMono-Regular.ttf') format('truetype'); + font-display: block; +} + +@font-face { + font-family: 'Red Hat Mono', monospace; + src: local('Red Hat Mono'), url('../fonts/RedHatMono-Regular.ttf') format('truetype'); + font-display: block; +} + + +@font-face { + font-family: 'Source Code Pro', monospace; + src: local('Source Code Pro'), url('../fonts/SourceCodePro-Regular.ttf') format('truetype'); + font-display: block; +} + +@font-face { + font-family: 'Space Mono', monospace; + src: local('Space Mono'), url('../fonts/SpaceMono-Regular.ttf') format('truetype'); + font-display: block; +} + +@font-face { + font-family: 'Ubuntu Mono', monospace; + src: local('Ubuntu Mono'), url('../fonts/UbuntuMono-Regular.ttf') format('truetype'); + font-display: block; } // Patched RobotoMono font with icons // RobotoMono Windows Compatible for using in terminal // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono @font-face { - font-family: 'RobotoMono'; + font-family: 'RobotoMono', monospace; + src: local('RobotoMono'), url('../fonts/roboto-mono-nerd.ttf') format('truetype'); font-display: block; - src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype'); -} - -#fonts-preloading { - > .icons { - @include font-preload("Material Icons"); - } - - > .terminal { - @include font-preload("RobotoMono"); - } } diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-100.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-100.woff2 deleted file mode 100644 index f662e6cd2a..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-100.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-100italic.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-100italic.woff2 deleted file mode 100644 index b1b4f9ada7..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-100italic.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-300.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-300.woff2 deleted file mode 100644 index 3a052ac03c..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-300.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-300italic.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-300italic.woff2 deleted file mode 100644 index 93756538fe..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-300italic.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-500.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-500.woff2 deleted file mode 100644 index fd707809c2..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-500.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-500italic.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-500italic.woff2 deleted file mode 100644 index 10215999d5..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-500italic.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-700.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-700.woff2 deleted file mode 100644 index 6c1e8dd09a..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-700.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-700italic.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-700italic.woff2 deleted file mode 100644 index 27b02021ba..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-700italic.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-italic.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-italic.woff2 deleted file mode 100644 index 23a1f71b4e..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-italic.woff2 and /dev/null differ diff --git a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-regular.woff2 b/src/renderer/components/fonts/roboto-v20-cyrillic_latin-regular.woff2 deleted file mode 100644 index 6b85564019..0000000000 Binary files a/src/renderer/components/fonts/roboto-v20-cyrillic_latin-regular.woff2 and /dev/null differ diff --git a/src/renderer/fonts/AnonymousPro-Regular.ttf b/src/renderer/fonts/AnonymousPro-Regular.ttf new file mode 100644 index 0000000000..a98da85573 Binary files /dev/null and b/src/renderer/fonts/AnonymousPro-Regular.ttf differ diff --git a/src/renderer/fonts/IBMPlexMono-Regular.ttf b/src/renderer/fonts/IBMPlexMono-Regular.ttf new file mode 100644 index 0000000000..93331e2678 Binary files /dev/null and b/src/renderer/fonts/IBMPlexMono-Regular.ttf differ diff --git a/src/renderer/fonts/JetBrainsMono-Regular.ttf b/src/renderer/fonts/JetBrainsMono-Regular.ttf new file mode 100644 index 0000000000..9a5202eb14 Binary files /dev/null and b/src/renderer/fonts/JetBrainsMono-Regular.ttf differ diff --git a/src/renderer/components/fonts/MaterialIcons-Regular.ttf b/src/renderer/fonts/MaterialIcons-Regular.ttf similarity index 100% rename from src/renderer/components/fonts/MaterialIcons-Regular.ttf rename to src/renderer/fonts/MaterialIcons-Regular.ttf diff --git a/src/renderer/fonts/RedHatMono-Regular.ttf b/src/renderer/fonts/RedHatMono-Regular.ttf new file mode 100644 index 0000000000..27b4f2baac Binary files /dev/null and b/src/renderer/fonts/RedHatMono-Regular.ttf differ diff --git a/src/renderer/fonts/SourceCodePro-Regular.ttf b/src/renderer/fonts/SourceCodePro-Regular.ttf new file mode 100644 index 0000000000..09c7d9fb66 Binary files /dev/null and b/src/renderer/fonts/SourceCodePro-Regular.ttf differ diff --git a/src/renderer/fonts/SpaceMono-Regular.ttf b/src/renderer/fonts/SpaceMono-Regular.ttf new file mode 100644 index 0000000000..d713495180 Binary files /dev/null and b/src/renderer/fonts/SpaceMono-Regular.ttf differ diff --git a/src/renderer/fonts/UbuntuMono-Regular.ttf b/src/renderer/fonts/UbuntuMono-Regular.ttf new file mode 100644 index 0000000000..4977028d13 Binary files /dev/null and b/src/renderer/fonts/UbuntuMono-Regular.ttf differ diff --git a/src/renderer/components/fonts/roboto-mono-nerd.ttf b/src/renderer/fonts/roboto-mono-nerd.ttf similarity index 100% rename from src/renderer/components/fonts/roboto-mono-nerd.ttf rename to src/renderer/fonts/roboto-mono-nerd.ttf