diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 33ae8946a4..712d905b43 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -5,9 +5,9 @@ Arial empirically gets it right, hence prioritising Arial here. */ /* We fall through to Twemoji for emoji rather than falling through to native Emoji fonts (if any) to ensure cross-browser consistency */ -$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif; +$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Arial, Helvetica, Sans-Serif; -$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Noto Color Emoji', Courier, monospace; +$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', Courier, monospace; // unified palette // try to use these colors when possible diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index fd0fcdd8de..b4123c6368 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -77,9 +77,12 @@ export async function fixupColorFonts() { } if (await isColrFontSupported()) { - const font = new FontFace("Twemoji", - `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-colr.woff2")}')`, {}); - document.fonts.add(font); + 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. }