💄 feat(utils/fonts): setup spaceGrotesk and karla fonts

README.md

@@ -23,12 +23,6 @@
 - [tailwind-merge](https://github.com/dcastil/tailwind-merge)
 - [clsx](https://github.com/lukeed/clsx)
 
-### 🔤 Fonts
-
-- [next/font](https://nextjs.org/docs/basic-features/font-optimization)
-- [General Sans](https://www.fontshare.com/fonts/general-sans)
-- [Recoleta](https://www.myfonts.com/collections/recoleta-font-latinotype)
-
 ## Running Locally
 
 > **Warning**

src/components/shared/dropdown-menu.tsx

@@ -43,7 +43,7 @@ const DropdownMenu: FunctionComponent<DropdownMenuProps> = (props) => {
               'radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down',
               'w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56',
               'bg-white dark:bg-gray-800',
-              fonts.generalSans.className
+              fonts.karla.className
             )}
           >
             <DropdownMenuPrimitive.Label className="select-none p-2 text-xs text-gray-700 dark:text-gray-200">

src/components/shared/layout-wrapper.tsx

@@ -22,9 +22,9 @@ const LayoutWrapper: FunctionComponent<PropsWithChildren<{}>> = ({ children }) =
       <div
         className={classNames(
           'm-auto max-w-2xl px-4 sm:px-6 xl:max-w-2xl xl:px-0',
-          fonts.generalSans.className,
-          fonts.generalSans.variable,
-          fonts.recoleta.variable
+          fonts.karla.className,
+          fonts.karla.variable,
+          fonts.spaceGrotesk.variable
         )}
       >
         <div className="flex h-screen flex-col justify-between">

src/components/shared/typography.tsx

@@ -29,7 +29,7 @@ const Heading1: FunctionComponent<PropsWithChildren<HTMLAttributes<HTMLHeadingEl
     <h1
       className={classNames(
         'text-3xl font-extrabold tracking-tight sm:text-4xl md:text-6xl',
-        fonts.recoleta.className,
+        fonts.spaceGrotesk.className,
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ const Heading2: FunctionComponent<PropsWithChildren<HTMLAttributes<HTMLHeadingEl
     <h2
       className={classNames(
         'font-bold text-2xl md:text-3xl tracking-tight my-4 text-black dark:text-white',
-        fonts.recoleta.className,
+        fonts.spaceGrotesk.className,
         className
       )}
       {...props}
@@ -75,7 +75,7 @@ const Heading3: FunctionComponent<PropsWithChildren<HTMLAttributes<HTMLHeadingEl
     <h3
       className={classNames(
         'mt-8 scroll-m-20 text-xl font-semibold tracking-tight',
-        fonts.recoleta.className,
+        fonts.spaceGrotesk.className,
         className
       )}
       {...props}

src/pages/cv.tsx

@@ -45,7 +45,7 @@ const Page: NextPage<PageProps> = ({ work }) => {
     <main
       className={classNames(
         'container relative mx-auto scroll-my-12 overflow-auto p-4 print:p-12 md:p-16',
-        fonts.generalSans.className
+        fonts.karla.className
       )}
     >
       <section className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-6">

src/utils/fonts.ts

@@ -0,0 +1,18 @@
+import { Karla, Space_Grotesk } from 'next/font/google';
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-space-grotesk',
+});
+
+const karla = Karla({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-karla',
+});
+
+export default {
+  spaceGrotesk,
+  karla,
+};

tailwind.config.js

@@ -23,8 +23,8 @@ const config = {
         14: '3.5rem',
       },
       fontFamily: {
-        body: ['var(--font-general-sans)'],
-        heading: ['var(--font-recoleta)'],
+        body: ['var(--font-karla)'],
+        heading: ['var(--font-space-grotesk)'],
       },
       backgroundImage: {
         'texture-pattern': "url('/img/texture-pattern.svg')",