From 68b04a83e8719a2a8b9d6392018a72272a1467e3 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Mon, 3 Jul 2023 09:48:42 +0100
Subject: [PATCH] Fix font-family definition for emojis (#11170)

* Fix font-family definition for emojis

* prettier fix

* Rephrase comment about font family overrides
---
 res/css/_common.pcss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 88f7de5e03..8412cf2644 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -51,6 +51,20 @@ limitations under the License.
     --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */
 }
 
+/**
+ * We need to increase the specificity of the selector to override the 
+ * custom property set by the design tokens package
+ */
+[class^="cpd-theme"][class^="cpd-theme"] {
+    /**
+     * The design tokens package currently does not expose the fallback fonts
+     * We want to keep on re-using `$font-family` to not break custom themes
+     * and because we can to use `Twemoji` to display emoji rather than using
+     * system ones
+     */
+    --cpd-font-family-sans: $font-family;
+}
+
 @media only percy {
     :root {
         --percy-color-avatar: $username-variant2-color;