code
diff --git a/‎apps/design-system/app/fonts/CustomFont-Black.woff2‎
27.8 KB b/‎apps/design-system/app/fonts/CustomFont-Black.woff2‎
27.8 KB
diff --git a/‎apps/design-system/app/fonts/CustomFont-BlackItalic.woff2‎
30.5 KB b/‎apps/design-system/app/fonts/CustomFont-BlackItalic.woff2‎
30.5 KB
diff --git a/‎apps/design-system/app/fonts/CustomFont-Bold.woff2‎
27.9 KB b/‎apps/design-system/app/fonts/CustomFont-Bold.woff2‎
27.9 KB
diff --git a/‎apps/design-system/app/fonts/CustomFont-BoldItalic.woff2‎
30.6 KB b/‎apps/design-system/app/fonts/CustomFont-BoldItalic.woff2‎
30.6 KB
diff --git a/‎apps/design-system/app/fonts/CustomFont-Book.woff2‎
24.4 KB b/‎apps/design-system/app/fonts/CustomFont-Book.woff2‎
24.4 KB
diff --git a/‎apps/design-system/app/fonts/CustomFont-BookItalic.woff2‎
26.4 KB b/‎apps/design-system/app/fonts/CustomFont-BookItalic.woff2‎
26.4 KB
diff --git a/‎apps/design-system/app/fonts/CustomFont-Medium.woff2‎
27.5 KB b/‎apps/design-system/app/fonts/CustomFont-Medium.woff2‎
27.5 KB
diff --git a/‎apps/design-system/app/fonts/index.ts‎
Lines changed: 53 additions & 0 deletions b/‎apps/design-system/app/fonts/index.ts‎
Lines changed: 53 additions & 0 deletions
diff --git a/‎apps/design-system/app/layout.tsx‎
Lines changed: 12 additions & 5 deletions b/‎apps/design-system/app/layout.tsx‎
Lines changed: 12 additions & 5 deletions
@@ -0,0 +1,53 @@
+import { Source_Code_Pro } from 'next/font/google'
+import localFont from 'next/font/local'
+
+export const customFont = localFont({
+  variable: '--font-custom',
+  display: 'swap',
+  fallback: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  src: [
+    {
+      path: './CustomFont-Book.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BookItalic.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './CustomFont-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BoldItalic.woff2',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: './CustomFont-Black.woff2',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BlackItalic.woff2',
+      weight: '800',
+      style: 'italic',
+    },
+  ],
+})
+
+export const sourceCodePro = Source_Code_Pro({
+  subsets: ['latin'],
+  fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+  variable: '--font-source-code-pro',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+})
@@ -1,10 +1,10 @@
 import '@/styles/globals.css'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
+import { customFont, sourceCodePro } from './fonts'
 
-const inter = Inter({ subsets: ['latin'] })
+const className = `${customFont.variable} ${sourceCodePro.variable}`
 
 export const metadata: Metadata = {
   title: 'Supabase Design System',
@@ -17,9 +17,16 @@ interface RootLayoutProps {
 
 export default async function Layout({ children }: RootLayoutProps) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <head />
-      <body className={inter.className}>
+    <html lang="en" suppressHydrationWarning className={className}>
+      <head>
+        {/* [Danny]: This has to be an inline style tag here and not a separate component due to next/font */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `:root{--font-custom:${customFont.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
+          }}
+        />
+      </head>
+      <body>
         <ThemeProvider
           themes={['dark', 'light', 'classic-dark']}
           defaultTheme="system"