clean up

valentin0h · valentin0h · commit e7e88bccdde6 · 2025-03-14T13:13:44.000+01:00
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -22,15 +22,7 @@ import {
 } from '@gitbook/colors';
 import { IconStyle, IconsProvider } from '@gitbook/icons';
 
-import {
-    type CustomizationFont,
-    fontNotoColorEmoji,
-    fonts,
-    generateFontFacesCSS,
-    getCustomFontSources,
-    getFontData,
-    ibmPlexMono,
-} from '@/fonts';
+import { fontNotoColorEmoji, getFontData, ibmPlexMono } from '@/fonts';
 import { getSpaceLanguage } from '@/intl/server';
 import { getAssetURL } from '@/lib/assets';
 import { tcls } from '@/lib/tailwind';
@@ -77,7 +69,7 @@ export async function CustomizationRootLayout(props: {
                 sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
                 'links' in customization.styling && `links-${customization.styling.links}`,
                 fontNotoColorEmoji.variable,
-                !fontData.isCustom ? fontData.fontVariable : '', // Only use fontVariable for default fonts
+                fontData.isCustom ? 'font-content' : fontData.fontVariable,
                 ibmPlexMono.variable
             )}
         >
@@ -87,22 +79,23 @@ export async function CustomizationRootLayout(props: {
                 ) : null}
 
                 {/* Font preloading for custom fonts */}
-                {fontData.isCustom &&
-                    fontData.fontSources.map(({ url, format }) => (
-                        <link
-                            key={url.href}
-                            rel="preload"
-                            href={url.href}
-                            as="font"
-                            type={format ? `font/${format}` : undefined}
-                            crossOrigin="anonymous"
-                        />
-                    ))}
+                {fontData.isCustom
+                    ? fontData.fontSources.map(({ url, format }) => (
+                          <link
+                              key={url.href}
+                              rel="preload"
+                              href={url.href}
+                              as="font"
+                              type={format ? `font/${format}` : undefined}
+                              crossOrigin="anonymous"
+                          />
+                      ))
+                    : null}
 
                 {/* Custom font CSS */}
-                {fontData.isCustom && fontData.fontCSS && (
+                {fontData.isCustom && fontData.fontCSS ? (
                     <style id="custom-font-styles">{fontData.fontCSS}</style>
-                )}
+                ) : null}
 
                 <style
                     nonce={
@@ -149,9 +142,6 @@ export async function CustomizationRootLayout(props: {
             </head>
             <body
                 className={tcls(
-                    fontNotoColorEmoji.className,
-                    hasCustomFont ? 'font-sans' : fonts[customization.styling.font].className,
-                    `${ibmPlexMono.variable}`,
                     'bg-tint-base',
                     'theme-muted:bg-tint-subtle',
                     'theme-bold-tint:bg-tint-subtle',
@@ -286,58 +276,7 @@ function getSemanticColors(
         },
     };
 }
-/**
- * Define the custom font faces and set the --font-content to the custom font name
- */
-// function generateCustomFontFaces(customFont: CustomizationFontDefinition): string {
-//     const { fontFamily, faces } = customFont;
-//
-//     const regularFont = faces.find((face) => face.weight === 400);
-//     const boldFont = faces.find((face) => face.weight === 700);
-//
-//     if (!regularFont || !boldFont) {
-//         throw new Error('Custom font must have a regular and a bold face');
-//     }
-//
-//     const regular = `
-//         @font-face {
-//             font-family: ${fontFamily};
-//             font-style: normal;
-//             font-weight: ${regularFont.weight};
-//             font-display: swap;
-//             src: url(${regularFont.url});
-//         }
-// `;
-//
-//     // const semiBold = `
-//     //        @font-face {
-//     //            font-family: ${fontFamily};
-//     //            font-style: normal;
-//     //            font-weight: 600;
-//     //            font-display: swap;
-//     //            src: url(${boldFont.url});
-//     //        }
-//     //    `
-//     // 	: "";
-//
-//     const bold = `
-//         @font-face {
-//             font-family: ${fontFamily};
-//             font-style: normal;
-//             font-weight: ${boldFont.weight};
-//             font-display: swap;
-//             src: url(${boldFont.url});
-//         }
-//     `;
-//
-//     return `
-//         ${regular}
-//         ${bold}
-//         :root {
-//             --font-content: ${fontFamily};
-//         }
-//     `;
-// }
+
 type ColorInput = string;
 function generateColorVariable(
     name: string,
diff --git a/packages/gitbook/src/fonts/customFont.test.ts b/packages/gitbook/src/fonts/customFont.test.ts
@@ -1,10 +1,10 @@
-import { describe, test, expect } from 'bun:test';
+import { describe, expect, test } from 'bun:test';
+import stylelint from 'stylelint';
 import {
     type CustomizationFontDefinition,
     generateFontFacesCSS,
     getCustomFontSources,
 } from './customFonts';
-import stylelint from 'stylelint';
 
 const TEST_FONTS = {
     basic: {
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
@@ -72,7 +72,7 @@ const config: Config = {
                 'current-page': 'current="page"',
             },
             fontFamily: {
-                sans: ['var(--font-content)', 'arial', 'sans-serif'],
+                content: ['var(--font-content)', 'arial', 'sans-serif'],
                 mono: ['var(--font-mono)'],
                 emoji: [
                     'Apple Color Emoji',
