GitbookIO · gregberge · Dec 12, 2024 · Dec 11, 2024 · Dec 12, 2024
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
@@ -192,3 +192,30 @@ html {
 html.dark {
     color-scheme: dark light;
 }
+
+/* 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);
+    }
+}
diff --git a/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx b/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
@@ -3,32 +3,46 @@ import localFont from 'next/font/local';
 import { getEmojiForCode } from '@/lib/emojis';
 import { ClassValue, tcls } from '@/lib/tailwind';
 
-import './emoji.css';
-
-/* Load the 3 variants of the font as CSS variables and let the emoji.css decide on the best one to use */
-
-const svgFont = localFont({
-    src: './svg.woff2',
+/** 
+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-svg',
+    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: './sbix.woff2',
+    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: './cbdt.woff2',
+    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 = [svgFont.variable, sbixFont.variable, cbdtFont.variable].join(
+export const emojiFontClassName = [colrv1Font.variable, sbixFont.variable, cbdtFont.variable].join(
     ' ',
 );
 
@@ -40,5 +54,5 @@ export async function Emoji(props: { code: string; style?: ClassValue }) {
     const { code, style } = props;
 
     const fallback = getEmojiForCode(code);
-    return <span className={'emoji ' + tcls(style)}>{fallback}</span>;
+    return <span className={tcls('emoji', style)}>{fallback}</span>;
 }
diff --git a/packages/gitbook/src/components/primitives/Emoji/emoji.css b/packages/gitbook/src/components/primitives/Emoji/emoji.css
diff --git a/...rc/components/primitives/Emoji/cbdt.woff2 → ...nts/primitives/Emoji/joypixels-cbdt.woff2 b/...rc/components/primitives/Emoji/cbdt.woff2 → ...nts/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/...rc/components/primitives/Emoji/sbix.woff2 → ...nts/primitives/Emoji/joypixels-sbix.woff2 b/...rc/components/primitives/Emoji/sbix.woff2 → ...nts/primitives/Emoji/joypixels-sbix.woff2
diff --git a/packages/gitbook/src/components/primitives/Emoji/svg.woff2 b/packages/gitbook/src/components/primitives/Emoji/svg.woff2