feat: test some fonts

mbifulco · Jan 13, 2025 · 06e0cf9 · 06e0cf9
1 parent 3fe1dc8
commit 06e0cf9
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 11 deletions.
diff --git a/public/fonts/TAYDumpling.woff b/public/fonts/TAYDumpling.woff
diff --git a/public/fonts/TAYQuickDraw.woff b/public/fonts/TAYQuickDraw.woff
diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
@@ -22,7 +22,7 @@ export const Heading: React.FC<HeadingProps> = ({
   let headingClasses = '';
   switch (Component) {
     case 'h1':
-      headingClasses = 'text-2xl md:text-4xl uppercase italic';
+      headingClasses = 'text-2xl md:text-4xl uppercase';
       break;
     case 'h2':
       headingClasses = 'text-2xl md:text-3xl';

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -34,13 +34,13 @@ const Navbar = () => {
     <Disclosure as="nav" className="w-full bg-white">
       {({ open }) => (
         <>
-          <div className="flex w-full flex-row gap-6 sm:mx-auto sm:flex-col">
+          <div className="flex w-full flex-row gap-3 sm:mx-auto sm:flex-col">
             <Link href="/" className="hover:no-underline">
               <Heading
                 as="h1"
                 className={clsxm(
                   'text-center text-4xl uppercase text-gray-800 transition-all duration-500 ease-in-out hover:text-gray-700',
-                  'text-lg md:text-4xl'
+                  'font-dumpling -my-2 text-lg md:text-4xl'
                 )}
               >
                 Mike Bifulco
@@ -54,7 +54,7 @@ const Navbar = () => {
                     href={link.href}
                     key={link.href}
                     className={clsxm(
-                      'hover:textfont-extrabold inline-flex items-center px-1 pt-1 font-futura text-sm font-semibold uppercase text-gray-700 hover:border-gray-300',
+                      'hover:textfont-extrabold inline-flex items-center px-1 pt-1 text-sm font-semibold uppercase text-gray-700 hover:border-gray-300',
                       'hover:no-underline',
                       link.href === router.pathname && 'text-gray-900',
                       link.badge &&

diff --git a/src/components/Subtitle/Subtitle.tsx b/src/components/Subtitle/Subtitle.tsx
@@ -4,7 +4,7 @@ type SubtitleProps = {
 
 const Subtitle: React.FC<SubtitleProps> = ({ children }) => {
   return (
-    <span className="tagline font-sm inline-block rounded-md py-[-0.25ch] font-futura font-bold uppercase text-gray-700">
+    <span className="tagline font-sm inline-block rounded-md py-[-0.25ch] font-bold uppercase text-gray-700">
       {children}
     </span>
   );

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import type { AppProps } from 'next/app';
+import localFont from 'next/font/local';
 import posthog from 'posthog-js';
 import { PostHogProvider } from 'posthog-js/react';
 
@@ -10,6 +11,18 @@ import { trpc } from '@utils/trpc';
 import '../styles/globals.css';
 import '../components/CarbonAd/CarbonAd.css';
 
+const quickdraw = localFont({
+  src: '../../public/fonts/TAYQuickDraw.woff',
+  variable: '--font-quickdraw',
+});
+
+const dumpling = localFont({
+  src: '../../public/fonts/TAYDumpling.woff',
+  variable: '--font-dumpling',
+});
+
+const fontVariables = [quickdraw.variable, dumpling.variable].join(' ');
+
 // Check that PostHog is client-side (used to handle Next.js SSR)
 if (typeof window !== 'undefined') {
   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
@@ -25,10 +38,12 @@ if (typeof window !== 'undefined') {
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <PostHogProvider client={posthog}>
-      <DefaultLayout>
-        <FathomAnalytics siteId={env.NEXT_PUBLIC_FATHOM_ID} />
-        <Component {...pageProps} />
-      </DefaultLayout>
+      <div className={fontVariables}>
+        <DefaultLayout>
+          <FathomAnalytics siteId={env.NEXT_PUBLIC_FATHOM_ID} />
+          <Component {...pageProps} />
+        </DefaultLayout>
+      </div>
     </PostHogProvider>
   );
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,12 +16,29 @@ module.exports = {
       },
       fontFamily: {
         futura: ['Futura', 'Trebuchet MS', 'Arial', 'sans-serif'], // Custom Futura font
+        quickdraw: ['var(--font-quickdraw)'],
+        dumpling: ['var(--font-dumpling)'],
       },
       typography: (theme) => ({
         DEFAULT: {
           css: {
-            'h1, h2, h3, h4, h5, h6': {
-              fontFamily: `${theme('fontFamily.futura')}`,
+            h1: {
+              fontFamily: `${theme('fontFamily.dumpling')}`,
+            },
+            h2: {
+              fontFamily: `${theme('fontFamily.dumpling')}`,
+            },
+            h3: {
+              fontFamily: `${theme('fontFamily.dumpling')}`,
+            },
+            h4: {
+              fontFamily: `${theme('fontFamily.dumpling')}`,
+            },
+            h5: {
+              fontFamily: `${theme('fontFamily.dumpling')}`,
+            },
+            h6: {
+              fontFamily: `${theme('fontFamily.dumpling')}`,
             },
           },
         },