Return to using Fira Code as the default monospace font (#31302)

* Return to using Fira Code as the default monospace font.

because Inconsolata lacks Box Drawings and Geometric Shapes glyphs.
Fixes https://github.com/element-hq/element-web/issues/31289
Partially reverts https://github.com/matrix-org/matrix-react-sdk/pull/3008

* fix quotes

* fix tests

* fix quotes

* appease prettier

* fix snapshot tests, hopefully

* more snapshots

package.json

@@ -84,7 +84,7 @@
         "@babel/runtime": "^7.12.5",
         "@element-hq/element-web-module-api": "1.5.0",
         "@element-hq/web-shared-components": "link:packages/shared-components",
-        "@fontsource/inconsolata": "^5",
+        "@fontsource/fira-code": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/analytics-events": "^0.30.0",

playwright/e2e/audio-player/audio-player.spec.ts

@@ -49,7 +49,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     /**
      * Take snapshots of mx_EventTile_last on each layout, outputting log for reference/debugging.
      * @param detail The snapshot name. Used for outputting logs too.
-     * @param monospace This changes the font used to render the UI from a default one to Inconsolata. Set to false by default.
+     * @param monospace This changes the font used to render the UI from a default one to Fira Code. Set to false by default.
      */
     const takeSnapshots = async (page: Page, app: ElementAppPage, detail: string, monospace = false) => {
         // Check that the audio player is rendered and its button becomes visible
@@ -65,7 +65,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
             if (monospace) {
                 // Assert that the monospace timer is visible
-                await expect(locator.locator("[role='timer']")).toHaveCSS("font-family", "Inconsolata");
+                await expect(locator.locator("[role='timer']")).toHaveCSS("font-family", '"Fira Code"');
             }
         };
 
@@ -73,7 +73,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             // Enable system font and monospace setting
             await app.settings.setValue("useBundledEmojiFont", null, SettingLevel.DEVICE, false);
             await app.settings.setValue("useSystemFont", null, SettingLevel.DEVICE, true);
-            await app.settings.setValue("systemFont", null, SettingLevel.DEVICE, "Inconsolata");
+            await app.settings.setValue("systemFont", null, SettingLevel.DEVICE, "Fira Code");
         }
 
         // Check the status of the seek bar

playwright/e2e/right-panel/right-panel.spec.ts

@@ -164,7 +164,7 @@ test.describe("RightPanel", () => {
                     css: `
                         /* Use monospace font for consistent mask width */
                         .mx_UserInfo_profile_mxid {
-                            font-family: Inconsolata !important;
+                            font-family: "Fira Code" !important;
                         }
                     `,
                 });

playwright/e2e/user-view/user-view.spec.ts

@@ -24,7 +24,7 @@ test.describe("UserView", () => {
             css: `
                 /* Use monospace font for consistent mask width */
                 .mx_UserInfo_profile_mxid {
-                    font-family: Inconsolata !important;
+                    font-family: "Fira Code" !important;
                 }
             `,
         });

playwright/element-web-test.ts

@@ -144,7 +144,7 @@ export const expect = baseExpect.extend<Expectations>({
             }
             /* Use monospace font for timestamp for consistent mask width */
             .mx_MessageTimestamp {
-                font-family: Inconsolata !important;
+                font-family: "Fira Code" !important;
             }
         `;
 

res/css/views/settings/encryption/_ChangeRecoveryKey.pcss

@@ -45,7 +45,7 @@
             color: var(--cpd-color-text-secondary);
 
             .mx_KeyPanel_key {
-                font-family: Inconsolata, monospace;
+                font-family: "Fira Code", monospace;
                 /*
                  * From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77471&t=t7lozYrSI1AVZZ3U-4
                  */

res/themes/legacy-light/css/_legacy-light.pcss

@@ -15,7 +15,7 @@ $font-family:
     "Noto Color Emoji";
 
 $monospace-font-family:
-    "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
+    "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
     "Noto Color Emoji";
 
 /* unified palette */

res/themes/light/css/_light.pcss

@@ -15,7 +15,7 @@ $font-family:
     "Noto Color Emoji";
 
 $monospace-font-family:
-    "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
+    "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
     "Noto Color Emoji";
 
 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */

src/theme.ts

@@ -16,10 +16,10 @@ import "@fontsource/inter/600-italic.css";
 import "@fontsource/inter/700.css";
 import "@fontsource/inter/700-italic.css";
 
-import "@fontsource/inconsolata/latin-ext-400.css";
-import "@fontsource/inconsolata/latin-400.css";
-import "@fontsource/inconsolata/latin-ext-700.css";
-import "@fontsource/inconsolata/latin-700.css";
+import "@fontsource/fira-code/latin-ext-400.css";
+import "@fontsource/fira-code/latin-400.css";
+import "@fontsource/fira-code/latin-ext-700.css";
+import "@fontsource/fira-code/latin-700.css";
 
 import { logger } from "matrix-js-sdk/src/logger";
 

src/utils/exportUtils/exportCSS.ts

@@ -13,14 +13,14 @@ import customCSS from "!!raw-loader!./exportCustomCSS.css";
 const cssSelectorTextClassesRegex = /\.[\w-]+/g;
 
 function mutateCssText(css: string): string {
-    // replace used fonts so that we don't have to bundle Inter & Inconsalata
+    // replace used fonts so that we don't have to bundle Inter & Fira Code
     const sansFont = `-apple-system, BlinkMacSystemFont, avenir next,
             avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif`;
     return css
         .replace(/font-family: ?(Inter|'Inter'|"Inter")/g, `font-family: ${sansFont}`)
         .replace(/--cpd-font-family-sans: ?(Inter|'Inter'|"Inter")/g, `--cpd-font-family-sans: ${sansFont}`)
         .replace(
-            /font-family: ?Inconsolata/g,
+            /font-family: ?Fira Code/g,
             "font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
         );
 }

yarn.lock

@@ -1814,10 +1814,10 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
   integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
 
-"@fontsource/inconsolata@^5":
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/@fontsource/inconsolata/-/inconsolata-5.2.8.tgz#593859a9229939558219efb9c894f9f5ee6c491a"
-  integrity sha512-lIZW+WOZYpUH91g9r6rYYhfTmptF3YPPM54ZOs8IYVeeL4SeiAu4tfj7mdr8llYEq31DLYgi6JtGIJa192gB0Q==
+"@fontsource/fira-code@^5":
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.2.7.tgz#9ecbd909d53e7196a5d895b601747fe34491fc6a"
+  integrity sha512-tnB9NNund9TwIym8/7DMJe573nlPEQb+fKUV5GL8TBYXjIhDvL0D7mgmNVNQUPhXp+R7RylQeiBdkA4EbOHPGQ==
 
 "@fontsource/inter@^5":
   version "5.2.8"
@@ -4218,8 +4218,9 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
+  uid ""
 
 "@vector-im/matrix-wysiwyg@2.40.0":
   version "2.40.0"
@@ -9695,14 +9696,6 @@ matrix-widget-api@^1.14.0:
     "@types/events" "^3.0.0"
     events "^3.2.0"
 
-matrix-widget-api@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.14.0.tgz#aa90c40ace27d3165299f7dbc760a53001ce1446"
-  integrity sha512-DDvZGOQhI/rilPWg5VlLN7pHIsPt0Jt14lsuHDP+KU+fmpAQNITJ6aIld1ZoXWsrVGv2PS3x6K/MHtfruIOQJQ==
-  dependencies:
-    "@types/events" "^3.0.0"
-    events "^3.2.0"
-
 mdn-data@2.0.28:
   version "2.0.28"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"