chore: replace google font provider, adjust storybook config

guildxyz · Nov 25, 2024 · 8d6162b · 8d6162b
1 parent aaefa32
commit 8d6162b
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 18 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import type { Preview } from "@storybook/react";
 import "../src/styles/globals.css";
 
-import { dystopian, inter } from "@/lib/fonts";
+import { dystopian } from "@/lib/fonts";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import { useEffect } from "react";
 
@@ -20,14 +20,12 @@ const preview: Preview = {
         light: "",
         dark: "dark",
       },
-      defaultTheme: "light",
+      defaultTheme: "dark",
     }),
     (storyFn) => {
       useEffect(() => {
         if (typeof document === "undefined") return;
-        document
-          ?.querySelector("body")
-          ?.classList.add(inter.variable, dystopian.variable);
+        document?.querySelector("body")?.classList.add(dystopian.variable);
       }, []);
 
       return storyFn();

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "start": "next start",
     "type-check": "tsc --pretty --noEmit --incremental false",
     "write-check": "npx @biomejs/biome check --write --unsafe .",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
   },
   "dependencies": {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
 import { Header } from "@/components/Header";
+import { PreloadResources } from "@/components/PreloadResources";
 import { Providers } from "@/components/Providers";
 import { SignInDialog } from "@/components/SignInDialog";
 import { Toaster } from "@/components/ui/Toaster";
-import { dystopian, inter } from "@/lib/fonts";
+import { dystopian } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
 
 export const metadata: Metadata = {
@@ -24,7 +25,8 @@ const RootLayout = ({
 }>) => {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={cn(dystopian.variable, inter.variable)}>
+      <body className={cn(dystopian.variable)}>
+        <PreloadResources />
         <Providers>
           <Header />
           {children}

diff --git a/src/components/PreloadResources.tsx b/src/components/PreloadResources.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import ReactDOM from "react-dom";
+
+export const PreloadResources = () => {
+  ReactDOM.preload(
+    "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-normal.woff2",
+    {
+      as: "font",
+      crossOrigin: "",
+      type: "font/woff2",
+      fetchPriority: "high",
+    },
+  );
+  ReactDOM.preload(
+    "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-italic.woff2",
+    {
+      as: "font",
+      crossOrigin: "",
+      type: "font/woff2",
+    },
+  );
+  return null;
+};
diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
@@ -1,13 +1,5 @@
-import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-  fallback: ["sans-serif"],
-  weight: "variable",
-});
-
 const dystopian = localFont({
   src: [
     {
@@ -33,4 +25,4 @@ const dystopian = localFont({
   variable: "--font-dystopian",
 });
 
-export { dystopian, inter };
+export { dystopian };
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,23 @@
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,6 +27,8 @@ html {
 }
 
 :root {
+  --font-inter: 'Inter Variable';
+
   /* Raw colors */
   --indigo-50: #eef2ff;
   --indigo-100: #e0e7ff;
@@ -83,7 +105,7 @@ html {
   --image: var(--gray-700);
   --skeleton: var(--gray-300);
   --border: var(--gray-300);
-  
+
   --input-border: var(--gray-200);
   --input-border-accent: var(--gray-300);
   --input-border-invalid: var(--red-500);