Fix the fonts display on the site (#2893)

gregberge · web-flow · commit 23f884efb7e7 · 2025-02-27T17:27:17.000+01:00
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -63,7 +63,10 @@ export async function CustomizationRootLayout(props: {
                 tintColor ? ' tint' : 'no-tint',
                 sidebarStyles.background && `sidebar-${sidebarStyles.background}`,
                 sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
-                'links' in customization.styling && `links-${customization.styling.links}`
+                'links' in customization.styling && `links-${customization.styling.links}`,
+                fontNotoColorEmoji.variable,
+                fonts[customization.styling.font].variable,
+                ibmPlexMono.variable
             )}
         >
             <head>
@@ -115,9 +118,6 @@ export async function CustomizationRootLayout(props: {
             </head>
             <body
                 className={tcls(
-                    fontNotoColorEmoji.className,
-                    `${fonts[customization.styling.font].className}`,
-                    `${ibmPlexMono.variable}`,
                     'bg-tint-base',
                     'theme-muted:bg-tint-subtle',
                     'theme-bold-tint:bg-tint-subtle',
diff --git a/packages/gitbook/src/fonts/index.ts b/packages/gitbook/src/fonts/index.ts
@@ -188,7 +188,7 @@ const abcFavorit = localFont({
 /**
  * Font definitions.
  */
-export const fonts: { [fontName in CustomizationFont]: { className: string } } = {
+export const fonts: { [fontName in CustomizationFont]: { variable: string } } = {
     [CustomizationFont.Inter]: inter,
     [CustomizationFont.FiraSans]: firaSans,
     [CustomizationFont.IBMPlexSerif]: ibmPlexSerif,
