Remove Twemoji SBIX font in favour of COLRv0 (#28549)

* Remove Twemoji SBIX font in favour of COLRv0

as it is supported everywhere we need it

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused mock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

jest.config.ts

@@ -32,7 +32,6 @@ const config: Config = {
         "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
         "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
         "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
-        "FontManager.ts": "<rootDir>/__mocks__/FontManager.js",
         "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",

res/themes/light/css/_fonts.pcss

@@ -143,3 +143,21 @@ $inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f, U+25c2
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
         U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* Twemoji COLR */
+@font-face {
+    font-family: "Twemoji";
+    font-weight: 400;
+    src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2");
+}
+/* For at least Chrome on Windows 10, we have to explictly add extra weights for the emoji to appear in bold messages, etc. */
+@font-face {
+    font-family: "Twemoji";
+    font-weight: 600;
+    src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Twemoji";
+    font-weight: 700;
+    src: url("$(res)/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2") format("woff2");
+}

src/components/structures/LoggedInView.tsx

@@ -23,7 +23,6 @@ import classNames from "classnames";
 import { isOnlyCtrlOrCmdKeyEvent, Key } from "../../Keyboard";
 import PageTypes from "../../PageTypes";
 import MediaDeviceHandler from "../../MediaDeviceHandler";
-import { fixupColorFonts } from "../../utils/FontManager";
 import dis from "../../dispatcher/dispatcher";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
 import SettingsStore from "../../settings/SettingsStore";
@@ -149,8 +148,6 @@ class LoggedInView extends React.Component<IProps, IState> {
 
         MediaDeviceHandler.loadDevices();
 
-        fixupColorFonts();
-
         this._roomView = React.createRef();
         this._resizeContainer = React.createRef();
         this.resizeHandler = React.createRef();

src/components/views/verification/VerificationShowSas.tsx

@@ -14,7 +14,6 @@ import SasEmoji from "@matrix-org/spec/sas-emoji.json";
 import { _t, getNormalizedLanguageKeys, getUserLanguage } from "../../../languageHandler";
 import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
-import { fixupColorFonts } from "../../../utils/FontManager";
 
 interface IProps {
     pending?: boolean;
@@ -88,11 +87,6 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
         this.state = {
             pending: false,
         };
-
-        // As this component is also used before login (during complete security),
-        // also make sure we have a working emoji font to display the SAS emojis here.
-        // This is also done from LoggedInView.
-        fixupColorFonts();
     }
 
     private onMatchClick = (): void => {