Approach using system fonts within WebCord

This change removes most bundled fonts from NPM sources and re-approaches to
rely on Electron's default fonts, with possibly better defaults for each of the
platforms. This change is motivated with the fact that bundled fonts have
significantly increased the disk usage of WebCord's `app.asar`.

package.json

@@ -63,9 +63,6 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^5.0.2",
-    "@fontsource/roboto": "^5.0.2",
-    "@fontsource/ubuntu": "^5.0.2",
     "@spacingbat3/disconnection": "^1.0.3",
     "@spacingbat3/kolor": "^4.0.0",
     "deepmerge-ts": "^5.1.0",

sources/assets/web/css/fonts.css

@@ -1,25 +1,9 @@
-/** Roboto: regular, bold, italic, bold+italic **/
-@import url('../../../../node_modules/@fontsource/roboto/700.css');
-@import url('../../../../node_modules/@fontsource/roboto/700-italic.css');
-@import url('../../../../node_modules/@fontsource/roboto/400.css');
-@import url('../../../../node_modules/@fontsource/roboto/400-italic.css');
-
-/** Ubuntu: regular, bold, italic, bold+italic **/
-@import url('../../../../node_modules/@fontsource/ubuntu/700.css');
-@import url('../../../../node_modules/@fontsource/ubuntu/700-italic.css');
-@import url('../../../../node_modules/@fontsource/ubuntu/400.css');
-@import url('../../../../node_modules/@fontsource/ubuntu/400-italic.css');
-
-/** Fira Code: regular, bold, italic, bold+italic **/
-@import url('../../../../node_modules/@fontsource/fira-code/700.css');
-@import url('../../../../node_modules/@fontsource/fira-code/400.css');
-
 /** Twemoji **/
 @import url('../../../../node_modules/twemoji-colr-font/twemoji.css');
 
 :root {
-    --font-primary: 'Roboto',Twemoji, Arial, sans-serif;
-    --font-display: 'Ubuntu',Twemoji, Arial, sans-serif;
-    --font-code: 'Fira Code',Twemoji, Courier, monospace;
+    --font-primary: sans-serif, Twemoji;
+    --font-display: sans-serif, Twemoji;
+    --font-code: monospace, Twemoji;
     --font-headline: var(--font-display);
 }

sources/code/common/global.ts

@@ -209,6 +209,18 @@ export function wordWrap(long:string,maxr:number,maxc:number):string {
   return res;
 }
 
+/** A definitions for default font families that will be used in Electron. */
+export const fonts = Object.freeze({
+  standard: process.platform === "win32" ? "SegoeUI" as const :
+    process.platform === "darwin" ? "SF Pro" as const : "Sans" as const,
+  sansSerif: process.platform === "win32" ? "SegoeUI" as const :
+    process.platform === "darwin" ? "SF Pro" as const : "Sans" as const,
+  serif: process.platform === "win32" ? "Times New Roman" as const :
+    process.platform === "darwin" ? "New York" as const : "Serif" as const,
+  monospace: process.platform === "win32" ? "Cascadia Code" as const :
+    process.platform === "darwin" ? "SF Pro" as const : "Monospace" as const
+} satisfies Electron.DefaultFontFamily);
+
 type hookName = keyof HookSignatures;
 
 interface WsCmd {

sources/code/main/modules/parent.ts

@@ -5,6 +5,7 @@ import { resolve } from "path";
 import { deepmerge } from "deepmerge-ts";
 import { styles } from "./extensions";
 import { commonCatches } from "./error";
+import { fonts } from "../../common/global";
 
 /** A list of popup windows (i.e. non-local ones). */
 const popups = [
@@ -36,9 +37,7 @@ export function initWindow(name:keyof L10N["client"]["windows"], parent: Electro
       enableWebSQL: false,
       webgl: false,
       autoplayPolicy: "user-gesture-required",
-      defaultFontFamily: {
-        standard: "Arial" // `sans-serif` as default font.
-      },
+      defaultFontFamily: fonts,
       ...( !isPopup ? {
         preload: resolve(app.getAppPath(), "app/code/renderer/preload/"+name+".js")
       } : {}),

sources/code/main/windows/main.ts

@@ -16,7 +16,7 @@ import {
   systemPreferences
 } from "electron/main";
 import * as getMenu from "../modules/menu";
-import { knownInstancesList } from "../../common/global";
+import { fonts, knownInstancesList } from "../../common/global";
 import packageJson from "../../common/modules/package";
 import { getWebCordCSP } from "../modules/csp";
 import L10N from "../../common/modules/l10n";
@@ -58,9 +58,7 @@ export default function createMainWindow(flags:MainWindowFlags): BrowserWindow {
       contextIsolation: true, // Isolates website from preloads.
       sandbox: false, // Removes Node.js from preloads (TODO).
       devTools: true, // Allows the use of the devTools.
-      defaultFontFamily: {
-        standard: "Arial" // `sans-serif` as default font.
-      },
+      defaultFontFamily: fonts,
       enableWebSQL: false,
       webgl: appConfig.value.settings.advanced.webApi.webGl,
       safeDialogs: true, // prevents dialog spam by the website