Fix emojis display

Use Apple emojis if available, else fallback on Noto Emoji Color font that is the best emoji font available.
GitbookIO · Dec 19, 2024 · 364cdb9 · 364cdb9
1 parent e8e64bf
commit 364cdb9
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 70 deletions.
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -11,13 +11,12 @@ import assertNever from 'assert-never';
 import colorContrast from 'postcss-color-contrast/js';
 import colors from 'tailwindcss/colors';
 
-import { fonts, ibmPlexMono } from '@/fonts';
+import { fontNotoColorEmoji, fonts, ibmPlexMono } from '@/fonts';
 import { getSpaceLanguage } from '@/intl/server';
 import { getStaticFileURL } from '@/lib/assets';
 import { hexToRgb, shadesOfColor } from '@/lib/colors';
 import { tcls } from '@/lib/tailwind';
 
-import { emojiFontClassName } from '../primitives';
 import { ClientContexts } from './ClientContexts';
 
 import '@gitbook/icons/style.css';
@@ -154,7 +153,7 @@ export async function CustomizationRootLayout(props: {
             </head>
             <body
                 className={tcls(
-                    emojiFontClassName,
+                    fontNotoColorEmoji.className,
                     `${fonts[customization.styling.font].className}`,
                     `${ibmPlexMono.variable}`,
                     'bg-light',

diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
@@ -4,6 +4,8 @@
 
 @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;
@@ -196,26 +198,5 @@ html.dark {
 /* Emojis */
 
 [class*='emoji'] {
-    font-family: var(--font-emojis-sbix);
-}
-
-/* Safari Only CSS here */
-_::-webkit-full-page-media,
-_:future,
-:root [class*='emoji'] {
-    font-family: var(--font-emojis-sbix);
-}
-
-/* Chrome Only CSS here */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    .emoji {
-        font-family: var(--font-emojis-colrv1);
-    }
-}
-
-/* Firefox Only CSS here */
-@-moz-document url-prefix() {
-    .emoji {
-        font-family: var(--font-emojis-colrv1);
-    }
+    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
@@ -1,51 +1,6 @@
-import localFont from 'next/font/local';
-
 import { getEmojiForCode } from '@/lib/emojis';
 import { ClassValue, tcls } from '@/lib/tailwind';
 
-/** 
-COLRv1 font.
-- lightweight, top quality
-- widely supported by modern browsers
-- currently not by Safari (or iOS)
-*/
-const colrv1Font = localFont({
-    src: './joypixels-colrv1.woff2',
-    preload: false,
-    variable: '--font-emojis-colrv1',
-});
-
-/** 
-SBIX font.
-- narrowly supported
-- currently required for Safari (or iOS)
-- provide alternative font-family name (see below)
-*/
-const sbixFont = localFont({
-    src: './joypixels-sbix.woff2',
-    preload: false,
-    variable: '--font-emojis-sbix',
-});
-
-/** 
-CBDT font.
-- widely supported
-- currently not by Safari (or iOS)
-- retain for legacy browser support
-*/
-const cbdtFont = localFont({
-    src: './joypixels-cbdt.woff2',
-    preload: false,
-    variable: '--font-emojis-cbdt',
-});
-
-/**
- * Class name to set on the <html> tag to use the emoji font.
- */
-export const emojiFontClassName = [colrv1Font.variable, sbixFont.variable, cbdtFont.variable].join(
-    ' ',
-);
-
 /**
  * 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).

diff --git a/packages/gitbook/src/components/primitives/Emoji/joypixels-cbdt.woff2 b/packages/gitbook/src/components/primitives/Emoji/joypixels-cbdt.woff2
diff --git a/packages/gitbook/src/components/primitives/Emoji/joypixels-colrv1.woff2 b/packages/gitbook/src/components/primitives/Emoji/joypixels-colrv1.woff2
diff --git a/packages/gitbook/src/components/primitives/Emoji/joypixels-sbix.woff2 b/packages/gitbook/src/components/primitives/Emoji/joypixels-sbix.woff2
diff --git a/packages/gitbook/src/fonts/index.ts b/packages/gitbook/src/fonts/index.ts
@@ -15,9 +15,17 @@ import {
     Roboto_Slab,
     Source_Sans_3,
     Ubuntu,
+    Noto_Color_Emoji,
 } from 'next/font/google';
 import localFont from 'next/font/local';
 
+export const fontNotoColorEmoji = Noto_Color_Emoji({
+    variable: '--font-noto-color-emoji',
+    weight: ['400'],
+    preload: false,
+    display: 'swap',
+});
+
 /*
     Fonts are downloaded and loaded by next/font.