diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index 961a58fe6..093a0b22f 100644
--- 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
index f8247e025..ce9d035f2 100644
--- a/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
+++ b/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
@@ -3,24 +3,38 @@ 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',
});
@@ -28,7 +42,7 @@ const cbdtFont = localFont({
/**
* Class name to set on the 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 {fallback};
+ return {fallback};
}
diff --git a/packages/gitbook/src/components/primitives/Emoji/emoji.css b/packages/gitbook/src/components/primitives/Emoji/emoji.css
deleted file mode 100644
index b9c135afa..000000000
--- a/packages/gitbook/src/components/primitives/Emoji/emoji.css
+++ /dev/null
@@ -1,24 +0,0 @@
-[class*='emoji'] {
- font-family: var(--font-emojis-cbdt);
-}
-
-/* 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-svg);
- }
-}
-
-/* Firefox Only CSS here */
-@-moz-document url-prefix() {
- .emoji {
- font-family: var(--font-emojis-svg);
- }
-}
diff --git a/packages/gitbook/src/components/primitives/Emoji/cbdt.woff2 b/packages/gitbook/src/components/primitives/Emoji/joypixels-cbdt.woff2
similarity index 56%
rename from packages/gitbook/src/components/primitives/Emoji/cbdt.woff2
rename to packages/gitbook/src/components/primitives/Emoji/joypixels-cbdt.woff2
index c0e26e354..d663b448d 100644
Binary files a/packages/gitbook/src/components/primitives/Emoji/cbdt.woff2 and b/packages/gitbook/src/components/primitives/Emoji/joypixels-cbdt.woff2 differ
diff --git a/packages/gitbook/src/components/primitives/Emoji/joypixels-colrv1.woff2 b/packages/gitbook/src/components/primitives/Emoji/joypixels-colrv1.woff2
new file mode 100644
index 000000000..f7a4bd519
Binary files /dev/null and b/packages/gitbook/src/components/primitives/Emoji/joypixels-colrv1.woff2 differ
diff --git a/packages/gitbook/src/components/primitives/Emoji/sbix.woff2 b/packages/gitbook/src/components/primitives/Emoji/joypixels-sbix.woff2
similarity index 56%
rename from packages/gitbook/src/components/primitives/Emoji/sbix.woff2
rename to packages/gitbook/src/components/primitives/Emoji/joypixels-sbix.woff2
index 73282d7c2..b5e8eb0b6 100644
Binary files a/packages/gitbook/src/components/primitives/Emoji/sbix.woff2 and b/packages/gitbook/src/components/primitives/Emoji/joypixels-sbix.woff2 differ
diff --git a/packages/gitbook/src/components/primitives/Emoji/svg.woff2 b/packages/gitbook/src/components/primitives/Emoji/svg.woff2
deleted file mode 100644
index 82ba95fd2..000000000
Binary files a/packages/gitbook/src/components/primitives/Emoji/svg.woff2 and /dev/null differ