move google fonts to default

Author: valentin0h

bun.lock

@@ -22,7 +22,7 @@ import {
 } from '@gitbook/colors';
 import { IconStyle, IconsProvider } from '@gitbook/icons';
 
-import { fontNotoColorEmoji, getFontData, renderFontPreloads, renderFontStyles } from '@/fonts';
+import { fontNotoColorEmoji, getFontData } from '@/fonts';
 import { getSpaceLanguage } from '@/intl/server';
 import { getAssetURL } from '@/lib/assets';
 import { tcls } from '@/lib/tailwind';

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -4,7 +4,7 @@ import {
     type CustomizationFontDefinition,
     generateFontFacesCSS,
     getFontSourcesToPreload,
-} from './customFonts';
+} from './custom';
 
 const TEST_FONTS = {
     basic: {
@@ -15,7 +15,7 @@ const TEST_FONTS = {
                 weight: 400,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/opensans-regular.woff2'),
+                        url: 'https://example.com/fonts/opensans-regular.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -24,7 +24,7 @@ const TEST_FONTS = {
                 weight: 700,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/opensans-bold.woff2'),
+                        url: 'https://example.com/fonts/opensans-bold.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -40,7 +40,7 @@ const TEST_FONTS = {
                 weight: 300,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/roboto-light.woff2'),
+                        url: 'https://example.com/fonts/roboto-light.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -49,7 +49,7 @@ const TEST_FONTS = {
                 weight: 400,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/roboto-regular.woff2'),
+                        url: 'https://example.com/fonts/roboto-regular.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -58,7 +58,7 @@ const TEST_FONTS = {
                 weight: 500,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/roboto-medium.woff2'),
+                        url: 'https://example.com/fonts/roboto-medium.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -67,7 +67,7 @@ const TEST_FONTS = {
                 weight: 700,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/roboto-bold.woff2'),
+                        url: 'https://example.com/fonts/roboto-bold.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -76,7 +76,7 @@ const TEST_FONTS = {
                 weight: 900,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/roboto-black.woff2'),
+                        url: 'https://example.com/fonts/roboto-black.woff2',
                         format: 'woff2',
                     },
                 ],
@@ -92,10 +92,10 @@ const TEST_FONTS = {
                 weight: 400,
                 sources: [
                     {
-                        url: new URL('https://example.com/fonts/lato-regular.woff2'),
+                        url: 'https://example.com/fonts/lato-regular.woff2',
                         format: 'woff2',
                     },
-                    { url: new URL('https://example.com/fonts/lato-regular.woff'), format: 'woff' },
+                    { url: 'https://example.com/fonts/lato-regular.woff', format: 'woff' },
                 ],
             },
         ],
@@ -108,9 +108,9 @@ const TEST_FONTS = {
             {
                 weight: 400,
                 sources: [
-                    { url: new URL('https://example.com/fonts/sourcesans-regular.woff2') },
+                    { url: 'https://example.com/fonts/sourcesans-regular.woff2' },
                     {
-                        url: new URL('https://example.com/fonts/sourcesans-regular.woff'),
+                        url: 'https://example.com/fonts/sourcesans-regular.woff',
                         format: 'woff',
                     },
                 ],
@@ -130,9 +130,7 @@ const TEST_FONTS = {
         fontFaces: [
             {
                 weight: 400,
-                sources: [
-                    { url: new URL('https://example.com/fonts/special.woff2'), format: 'woff2' },
-                ],
+                sources: [{ url: 'https://example.com/fonts/special.woff2', format: 'woff2' }],
             },
         ],
     } as CustomizationFontDefinition,
@@ -144,15 +142,15 @@ const TEST_FONTS = {
             {
                 weight: 400,
                 sources: [
-                    { url: new URL('https://example.com/fonts/regular.woff2') },
-                    { url: new URL('https://example.com/fonts/regular.woff') },
+                    { url: 'https://example.com/fonts/regular.woff2' },
+                    { url: 'https://example.com/fonts/regular.woff' },
                 ],
             },
             {
                 weight: 700,
                 sources: [
-                    { url: new URL('https://example.com/fonts/bold.woff2') },
-                    { url: new URL('https://example.com/fonts/bold.woff') },
+                    { url: 'https://example.com/fonts/bold.woff2' },
+                    { url: 'https://example.com/fonts/bold.woff' },
                 ],
             },
         ],
@@ -165,9 +163,9 @@ const TEST_FONTS = {
             {
                 weight: 400,
                 sources: [
-                    { url: new URL('https://example.com/fonts/absolute.woff2') },
-                    { url: new URL('/fonts/relative.woff2', 'https://example.com') },
-                    { url: new URL('./fonts/path-relative.woff2', 'https://example.com') },
+                    { url: 'https://example.com/fonts/1.woff2' },
+                    { url: 'https://example.com/fonts/2.woff2' },
+                    { url: 'https://example.com/fonts/3.woff2' },
                 ],
             },
         ],
@@ -292,8 +290,8 @@ describe('getCustomFontPreloadLinks', () => {
 
         expect(result).toBeArray();
         expect(result.length).toBe(3);
-        expect(result).toContain('https://example.com/fonts/absolute.woff2');
-        expect(result).toContain('https://example.com/fonts/relative.woff2');
-        expect(result).toContain('https://example.com/fonts/path-relative.woff2');
+        expect(result).toContain('https://example.com/fonts/1.woff2');
+        expect(result).toContain('https://example.com/fonts/2.woff2');
+        expect(result).toContain('https://example.com/fonts/3.woff2');
     });
 });

packages/gitbook/src/fonts/customFont.test.ts packages/gitbook/src/fonts/custom.test.ts

@@ -1,5 +1,5 @@
 import type { CustomizationDefaultFont } from '@gitbook/api';
-import { fonts } from './index';
+import { fonts } from './default';
 
 /**
  * The human-readable font-family name used in CSS (e.g., "Open Sans", "Playfair Display").
@@ -60,7 +60,7 @@ export type CustomizationFont = CustomizationDefaultFont | CustomizationFontDefi
  * Define the custom font faces and set the --font-content to the custom font name
  */
 export function generateFontFacesCSS(customFont: CustomizationFontDefinition): string {
-    const { fontFamily, fontFaces } = customFont;
+    const { fontFaces } = customFont;
 
     // Generate font face declarations for all weights
     const fontFaceDeclarations = fontFaces
@@ -77,9 +77,10 @@ export function generateFontFacesCSS(customFont: CustomizationFontDefinition): s
                 })
                 .join(', ');
 
+            // We could use the font-family name here, but to avoid extra normalization we're using CustomFont
             return `
         @font-face {
-            font-family: ${fontFamily};
+            font-family: CustomFont; 
             font-style: normal;
             font-weight: ${face.weight};
             font-display: swap;
@@ -92,7 +93,7 @@ export function generateFontFacesCSS(customFont: CustomizationFontDefinition): s
     return `
         ${fontFaceDeclarations}
         :root {
-            --font-custom: ${fontFamily};
+            --font-custom: CustomFont;
         }
     `;
 }
@@ -140,7 +141,6 @@ interface CustomFontData {
 
 /**
  * Get the appropriate font data for a given font configuration
- * @param font Either a predefined font name or a custom font configuration
  */
 export function getFontData(font: CustomizationFont): FontData {
     if (typeof font === 'string') {