element-web/src/utils/FontManager.js

/*
Copyright 2019 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 * Based on...
 * ChromaCheck 1.16
 * author Roel Nieskens, https://pixelambacht.nl
 * MIT license
 */

async function isColrFontSupported() {
    console.log("Checking for COLR support");

    // Firefox has supported COLR fonts since version 26
    // but doesn't support the check below without
    // "Extract canvas data" permissions
    // when content blocking is enabled.
    if (navigator.userAgent.includes("Firefox")) {
        console.log("Browser is Firefox - assuming COLR is supported");
        return true;
    }

    try {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const img = new Image();
        // eslint-disable-next-line
        const fontCOLR = 'd09GRgABAAAAAAKAAAwAAAAAAowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDT0xSAAACVAAAABYAAAAYAAIAJUNQQUwAAAJsAAAAEgAAABLJAAAQT1MvMgAAAYAAAAA6AAAAYBfxJ0pjbWFwAAABxAAAACcAAAAsAAzpM2dseWYAAAH0AAAAGgAAABoNIh0kaGVhZAAAARwAAAAvAAAANgxLumdoaGVhAAABTAAAABUAAAAkCAEEAmhtdHgAAAG8AAAABgAAAAYEAAAAbG9jYQAAAewAAAAGAAAABgANAABtYXhwAAABZAAAABsAAAAgAg4AHW5hbWUAAAIQAAAAOAAAAD4C5wsecG9zdAAAAkgAAAAMAAAAIAADAAB4AWNgZGAAYQ5+qdB4fpuvDNIsDCBwaQGTAIi+VlscBaJZGMDiHAxMIAoAtjIF/QB4AWNgZGBgYQACOAkUQQWMAAGRABAAAAB4AWNgZGBgYGJgAdMMUJILJMQgAWICAAH3AC4AeAFjYGFhYJzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgFkDgKQMBw4CXDSwYWEBdIYgAFBgYA/8sIdAAABAAAAAAAAAB4AWNgYGBkYAZiBgYeBhYGBSDNAoRA/kuG//8hpDgjWJ4BAFVMBiYAAAAAAAANAAAAAQAAAAAEAAQAAAMAABEhESEEAPwABAD8AAAAeAEtxgUNgAAAAMHHIQTShTlOAty9/4bf7AARCwlBNhBw4L/43qXjYGUmf19TMuLcj/BJL3XfBg54AWNgZsALAAB9AAR4AWNgYGAEYj4gFgGygGwICQACOwAoAAAAAAABAAEAAQAAAA4AAAAAyP8AAA==';
        const svg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="100" style="background:#fff;fill:#000;">
            <style type="text/css">
                @font-face {
                    font-family: "chromacheck-colr";
                    src: url(data:application/x-font-woff;base64,${fontCOLR}) format("woff");
                }
            </style>
            <text x="0" y="0" font-size="20">
                <tspan font-family="chromacheck-colr" x="0" dy="20">&#xe900;</tspan>
            </text>
        </svg>`;
        canvas.width = 20;
        canvas.height = 100;

        img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);

        console.log("Waiting for COLR SVG to load");
        await new Promise(resolve => img.onload = resolve);
        console.log("Drawing canvas to detect COLR support");
        context.drawImage(img, 0, 0);
        const colrFontSupported = (context.getImageData(10, 10, 1, 1).data[0] === 200);
        console.log("Canvas check revealed COLR is supported? " + colrFontSupported);
        return colrFontSupported;
    } catch (e) {
        console.error("Couldn't load COLR font", e);
        return false;
    }
}

let colrFontCheckStarted = false;
export async function fixupColorFonts() {
    if (colrFontCheckStarted) {
        return;
    }
    colrFontCheckStarted = true;

    if (await isColrFontSupported()) {
        const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`;
        document.fonts.add(new FontFace("Twemoji", path, {}));
        // For at least Chrome on Windows 10, we have to explictly add extra
        // weights for the emoji to appear in bold messages, etc.
        document.fonts.add(new FontFace("Twemoji", path, { weight: 600 }));
        document.fonts.add(new FontFace("Twemoji", path, { weight: 700 }));
    }
    // if not supported, the browser will fall back to one of the native fonts specified.
}