From 11828c40e546a5a1485857b37c1aab6d7731eba9 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 22 May 2019 16:22:18 +0100 Subject: [PATCH 1/3] Add more weight of emoji font For at least Chrome on Windows 10, we need to explicitly add additional weights for emoji to appear when bold. --- src/utils/FontManager.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index fd0fcdd8de..3080526135 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -77,9 +77,10 @@ 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, {})); + 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. } From e01a6ce24c87a2578f003dda9652025a5f151d1c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 22 May 2019 16:27:03 +0100 Subject: [PATCH 2/3] Add Segoe UI Emoji as native fallback for Windows --- res/themes/light/css/_light.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 From c9300650edd7f0a52d99c5f86a30798a0ec4eb41 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 22 May 2019 16:37:52 +0100 Subject: [PATCH 3/3] Add browser comment to extra fonts --- src/utils/FontManager.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/utils/FontManager.js b/src/utils/FontManager.js index 3080526135..b4123c6368 100644 --- a/src/utils/FontManager.js +++ b/src/utils/FontManager.js @@ -79,6 +79,8 @@ export async function fixupColorFonts() { 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 })); }