font fallback to arial or system ui font

ridhozhr10 · May 16, 2024 · 10e12f1 · 10e12f1
1 parent 2a7bc75
commit 10e12f1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/src/app/_components/layout/Header/index.tsx b/src/app/_components/layout/Header/index.tsx
@@ -17,7 +17,7 @@ const Logo = ({ text }: { text?: string }) => (
     <div>
       <span>&gt;</span>
       <span>$</span>
-      {text ? (
+      {text !== undefined ? (
         <span
           style={{ animationTimingFunction: `steps(${text.length + 3}, end)` }}
         >

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Inter, IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
 
 const inter = Inter({
   subsets: ["latin"],
+  weight: ["400", "600", "700"],
   display: "swap",
+  variable: "--font-inter",
 });
 
 export const metadata: Metadata = {
@@ -18,8 +20,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={inter.className}>
-      <body>{children}</body>
+    <html lang="en">
+      <body className={`${inter.variable} font-sans`}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
@@ -3,7 +3,7 @@ import BaseLayout from "./_components/layout/BaseLayout";
 
 export default function Loading() {
   return (
-    <BaseLayout>
+    <BaseLayout logoText="">
       <BiLoader className="animate-spin" />
     </BaseLayout>
   );

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
@@ -6,9 +6,9 @@ export const metadata = {
 
 export default function Project() {
   return (
-    <BaseLayout>
+    <BaseLayout logoText="ls ~/Workspaces">
       <main>
-        <h1 className="text-5xl">ls ~/Workspaces</h1>
+        <h1 className="text-5xl">Coming Soon</h1>
       </main>
     </BaseLayout>
   );

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -12,7 +12,17 @@ const config: Config = {
     },
     extend: {
       fontFamily: {
-        mono: "monospace, monospace",
+        mono: ["monospace", "monospace"],
+        sans: [
+          "var(--font-inter)",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Roboto",
+          "Segoe UI",
+          "Helvetica",
+          "Arial",
+          "sans-serif",
+        ],
       },
       colors: {
         "header-bg-dark": "#1b1c1d",