Merge pull request #128 from inkonchain/feat/add-jakarta-sans-font

feat: add jakarta sans font

Author: inkjesse

src/fonts.ts

@@ -0,0 +1,13 @@
+import { Inter, Plus_Jakarta_Sans } from "next/font/google";
+
+export const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+export const plus_jakarta_sans = Plus_Jakarta_Sans({
+  subsets: ["latin"],
+  variable: "--font-plus-jakarta-sans",
+  display: "swap",
+});

src/globals.css

@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+
+@layer utilities {
+  body {
+    background-color: blue;
+    font-family: var(--font-plus-jakarta-sans), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
 @layer base {
   h1,
   h2,

src/pages/_app.tsx

@@ -1,19 +1,15 @@
 // These styles apply to every route in the application
 import type { AppProps } from "next/app";
-import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
-import "../globals.css";
+import { inter, plus_jakarta_sans } from "../fonts";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-});
+import "../globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider attribute="class">
-      <div className={`${inter.variable} font-sans`}>
+      <div className={`${inter.variable} ${plus_jakarta_sans.variable} font-sans`}>
         <div className="bg-white dark:bg-magic-black">
           <Component {...pageProps} />
         </div>

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode : 'class',
+  darkMode: 'class',
   content: [
     './src/**/*.{js,jsx,ts,tsx,md,mdx}',
     './theme.config.tsx'
@@ -23,9 +23,9 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ['var(--font-inter)'],
+        sans: ['var(--font-plus-jakarta-sans)', 'var(--font-inter)', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Apple Color Emoji', 'Arial', 'sans-serif', 'Segoe UI Emoji', 'Segoe UI Symbol'],
       },
     },
   },
   plugins: [],
-}
+}