fix: android monospace font (#1735)

packages/web/src/javascripts/App.tsx

@@ -26,7 +26,7 @@ declare global {
 }
 
 import { IsWebPlatform, WebAppVersion } from '@/Constants/Version'
-import { DesktopManagerInterface, Environment, SNLog } from '@standardnotes/snjs'
+import { DesktopManagerInterface, Environment, Platform, SNLog } from '@standardnotes/snjs'
 import ApplicationGroupView from './Components/ApplicationGroupView/ApplicationGroupView'
 import { WebDevice } from './Application/Device/WebDevice'
 import { StartApplication } from './Application/Device/StartApplication'
@@ -48,6 +48,15 @@ const setViewportHeight = () => {
   )
 }
 
+const setDefaultMonospaceFont = (platform?: Platform) => {
+  if (platform === Platform.Android) {
+    document.documentElement.style.setProperty(
+      '--sn-stylekit-monospace-font',
+      '"Roboto Mono", "Droid Sans Mono", monospace',
+    )
+  }
+}
+
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
   device: WebOrDesktopDevice,
@@ -77,12 +86,15 @@ const startApplication: StartApplication = async function startApplication(
     root = createRoot(appendedRootNode)
 
     disableIosTextFieldZoom()
+
     setViewportHeight()
     window.addEventListener('orientationchange', setViewportHeight)
     if (device.environment === Environment.Desktop) {
       window.addEventListener('resize', setViewportHeight)
     }
 
+    setDefaultMonospaceFont(device.platform)
+
     root.render(
       <ApplicationGroupView
         key={getKey()}

packages/web/src/javascripts/Application/Device/WebOrDesktopDevice.ts

@@ -8,10 +8,13 @@ import {
   NamespacedRootKeyInKeychain,
   extendArray,
   WebOrDesktopDeviceInterface,
+  Platform,
 } from '@standardnotes/snjs'
 import { Database } from '../Database'
 
 export abstract class WebOrDesktopDevice implements WebOrDesktopDeviceInterface {
+  platform?: Platform
+
   constructor(public appVersion: string) {}
 
   private databases: Database[] = []