Connect: Enable font configuration

web/packages/teleterm/src/services/config/configService.ts

@@ -85,12 +85,7 @@ const createAppConfigSchema = (platform: Platform) => {
     'keymap.openQuickInput': omitStoredConfigValue(
       z.string().default(defaultKeymap['open-quick-input'])
     ),
-    'fonts.sansSerifFamily': omitStoredConfigValue(
-      z.string().default(defaultFonts['sansSerif'])
-    ),
-    'fonts.monoFamily': omitStoredConfigValue(
-      z.string().default(defaultFonts['mono'])
-    ),
+    'fonts.monoFamily': z.string().default(defaultFonts['mono']),
   });
 };
 
@@ -193,17 +188,14 @@ function getDefaultFonts(platform: Platform) {
   switch (platform) {
     case 'win32':
       return {
-        sansSerif: "system-ui, 'Segoe WPC', 'Segoe UI', sans-serif",
         mono: "'Consolas', 'Courier New', monospace",
       };
     case 'linux':
       return {
-        sansSerif: "system-ui, 'Ubuntu', 'Droid Sans', sans-serif",
         mono: "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
       };
     case 'darwin':
       return {
-        sansSerif: '-apple-system, BlinkMacSystemFont, sans-serif',
         mono: "Menlo, Monaco, 'Courier New', monospace",
       };
   }

web/packages/teleterm/src/ui/App.tsx

@@ -36,12 +36,9 @@ export const App: React.FC<{ ctx: AppContext }> = ({ ctx }) => {
           <AppContextProvider value={ctx}>
             <ThemeProvider
               fonts={{
-                mono: ctx.mainProcessClient.configService.get(
-                  'fonts.monoFamily'
-                ).value,
-                sansSerif: ctx.mainProcessClient.configService.get(
-                  'fonts.sansSerifFamily'
-                ).value,
+                unsanitizedMono:
+                  ctx.mainProcessClient.configService.get('fonts.monoFamily')
+                    .value,
               }}
             >
               <AppInitializer />

web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx

@@ -16,6 +16,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Box, ButtonPrimary, Flex, Indicator } from 'design';
+import { useTheme } from 'styled-components';
 
 interface CliCommandProps {
   cliCommand: string;
@@ -25,6 +26,7 @@ interface CliCommandProps {
 
 export function CliCommand({ cliCommand, onRun, isLoading }: CliCommandProps) {
   const [shouldDisplayIsLoading, setShouldDisplayIsLoading] = useState(false);
+  const theme = useTheme();
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout>;
@@ -52,12 +54,12 @@ export function CliCommand({ cliCommand, onRun, isLoading }: CliCommandProps) {
         mr="2"
         color={shouldDisplayIsLoading ? 'text.secondary' : 'text.primary'}
         width="100%"
+        style={{ fontFamily: theme.fonts.unsanitizedMono }}
         css={`
           overflow: auto;
           white-space: pre;
           word-break: break-all;
           font-size: 12px;
-          font-family: ${props => props.theme.fonts.mono};
         `}
       >
         <Box mr="1">{`$`}</Box>

web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx

@@ -26,12 +26,11 @@ import XTermCtrl from './ctrl';
 export default function Terminal(props: Props) {
   const refElement = useRef<HTMLElement>();
   const refCtrl = useRef<XTermCtrl>();
-  const fontFamily = useTheme().fonts.mono;
+  const fontFamily = useTheme().fonts.unsanitizedMono;
 
   useEffect(() => {
     const ctrl = new XTermCtrl(props.ptyProcess, {
       el: refElement.current,
-      fontFamily,
     });
 
     ctrl.open();
@@ -70,7 +69,7 @@ export default function Terminal(props: Props) {
       width="100%"
       style={{ overflow: 'hidden' }}
     >
-      <StyledXterm ref={refElement} />
+      <StyledXterm ref={refElement} style={{ fontFamily }} />
     </Flex>
   );
 }

web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts

@@ -27,7 +27,6 @@ const WINDOW_RESIZE_DEBOUNCE_DELAY = 200;
 
 type Options = {
   el: HTMLElement;
-  fontFamily?: string;
 };
 
 export default class TtyTerminal {
@@ -51,7 +50,7 @@ export default class TtyTerminal {
   open(): void {
     this.term = new Terminal({
       cursorBlink: false,
-      fontFamily: this.options.fontFamily,
+      fontFamily: this.el.style.fontFamily, // grab font family from style to prevent injecting malicious CSS
       scrollback: 5000,
       theme: {
         background: theme.colors.primary.darker,

web/packages/teleterm/src/ui/Documents/KeyboardShortcutsPanel.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Text } from 'design';
 
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import Document from 'teleterm/ui/Document';
 import { useKeyboardShortcutFormatters } from 'teleterm/ui/services/keyboardShortcuts';
@@ -67,20 +67,26 @@ export function KeyboardShortcutsPanel() {
 }
 
 function Entry(props: { title: string; shortcut: string }) {
+  const theme = useTheme();
   return (
     <>
       <Text textAlign="right" color="light" typography="subtitle1" py="4px">
         {props.title}
       </Text>
-      <MonoText bg="primary.main" textAlign="left" px="12px" py="4px">
+      <MonoText
+        style={{ fontFamily: theme.fonts.unsanitizedMono }}
+        bg="primary.main"
+        textAlign="left"
+        px="12px"
+        py="4px"
+      >
         {props.shortcut}
       </MonoText>
     </>
   );
 }
 
 const MonoText = styled(Text)`
-  font-family: ${props => props.theme.fonts.mono};
   width: fit-content;
   opacity: 0.7;
   border-radius: 4px;

web/packages/teleterm/src/ui/ThemeProvider/ThemeProvider.tsx

@@ -22,15 +22,13 @@ import theme from './theme';
 
 type TeletermThemeProvider = {
   fonts: {
-    mono: string;
-    sansSerif: string;
+    unsanitizedMono: string;
   };
 };
 
 const TeletermThemeProvider: React.FC<TeletermThemeProvider> = props => {
   if (props?.fonts) {
-    theme.font = props.fonts.sansSerif;
-    theme.fonts = props.fonts;
+    theme.fonts.unsanitizedMono = props.fonts.unsanitizedMono;
   }
 
   return (

web/packages/teleterm/src/ui/ThemeProvider/theme.ts

@@ -26,6 +26,7 @@ import {
   yellow,
 } from 'design/theme/palette';
 import typography, { fontSizes, fontWeights } from 'design/theme/typography';
+import { getPlatform } from 'design/theme/utils';
 
 const space = [0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80];
 const contrastThreshold = 3;
@@ -114,11 +115,38 @@ const borders = [
   '32px solid',
 ];
 
+function getSansSerif() {
+  const platform = getPlatform();
+
+  if (platform.isLinux) {
+    return "system-ui, 'Ubuntu', 'Droid Sans', sans-serif";
+  }
+
+  if (platform.isMac) {
+    return '-apple-system, BlinkMacSystemFont, sans-serif';
+  }
+
+  if (platform.isWin) {
+    return "system-ui, 'Segoe WPC', 'Segoe UI', sans-serif";
+  }
+}
+
+const sansSerif = getSansSerif();
+
 const theme = {
   colors,
   typography,
-  font: fonts.sansSerif,
-  fonts: fonts,
+  font: sansSerif,
+  fonts: {
+    sansSerif,
+    /**
+     * This value can be provided by the user and is unsanitized. This means that it cannot be directly interpolated
+     * in a styled component, as it may inject malicious CSS code.
+     * Before using it, sanitize it with `CSS.escape` or pass it as a `style` prop.
+     * Read more https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/.
+     */
+    unsanitizedMono: fonts.mono,
+  },
   fontWeights,
   fontSizes,
   space,