From 49219df915c0a2621ba58cfd7ace5a08207e74e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Wed, 8 Jan 2025 09:06:37 +0100
Subject: [PATCH] Improve emoji setup

---
 .changeset/forty-jars-fly.md                              | 5 +++++
 packages/gitbook/src/components/RootLayout/globals.css    | 8 --------
 .../gitbook/src/components/primitives/Emoji/Emoji.tsx     | 4 ++--
 packages/gitbook/tailwind.config.ts                       | 6 ++++++
 4 files changed, 13 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/forty-jars-fly.md

diff --git a/.changeset/forty-jars-fly.md b/.changeset/forty-jars-fly.md
new file mode 100644
index 000000000..6e530a9f8
--- /dev/null
+++ b/.changeset/forty-jars-fly.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve emoji setup, align with GitBook app
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index 3453579e0..961a58fe6 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -4,8 +4,6 @@
 
 @layer base {
     :root {
-        /* See packages/gitbook/src/fonts/index.ts */
-        --font-emoji: 'Apple Color Emoji', var(--font-noto-color-emoji);
         --scrollbar-width: calc(100vw - 100%);
 
         --dark-base: 20 20 20;
@@ -194,9 +192,3 @@ html {
 html.dark {
     color-scheme: dark light;
 }
-
-/* Emojis */
-
-[class*='emoji'] {
-    font-family: var(--font-emoji);
-}
diff --git a/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx b/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
index 8410bfde8..cc00167aa 100644
--- a/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
+++ b/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
@@ -3,11 +3,11 @@ import { ClassValue, tcls } from '@/lib/tailwind';
 
 /**
  * Render an emoji by its codepoint.
- * It renders the UTF-8 character and use the emojione font to display it (fallbacking to default browser font).
+ * It renders the UTF-8 character and use Emoji font defined in Tailwind CSS.
  */
 export async function Emoji(props: { code: string; style?: ClassValue }) {
     const { code, style } = props;
 
     const fallback = getEmojiForCode(code);
-    return <span className={tcls('emoji', style)}>{fallback}</span>;
+    return <span className={tcls('font-emoji', style)}>{fallback}</span>;
 }
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
index 7d7e6d1be..2980b2c2b 100644
--- a/packages/gitbook/tailwind.config.ts
+++ b/packages/gitbook/tailwind.config.ts
@@ -64,6 +64,12 @@ const config: Config = {
             fontFamily: {
                 sans: ['var(--font-content)'],
                 mono: ['var(--font-mono)'],
+                emoji: [
+                    'Apple Color Emoji',
+                    'Noto Color Emoji',
+                    '--font-noto-color-emoji',
+                    'sans-serif',
+                ],
                 var: ['var(--font-family)'],
             },
             colors: {