Fix gallery page font mismatch (Closes #66)

src/components/ApplyButton.tsx

@@ -31,7 +31,7 @@ const ApplyButton = () => {
               <span>&#62;</span>
               <span>&#62;</span>{" "}
             </div>
-            <div className="ml-[30px] font-console"> theTeam.join()</div>
+            <div className="ml-[30px] font-sans"> theTeam.join()</div>
           </div>
         </Link>
       </motion.div>

src/components/TeamSection/ProfileDescription.tsx

@@ -5,7 +5,7 @@ interface ProfileDescriptionProps {
 
 const ProfileDescription = ({ affiliation, name }: ProfileDescriptionProps) => {
   return (
-    <div className="mt-[10%] text-center font-[Inter,Tahoma,sans-serif]">
+    <div className="mt-[10%] text-center">
       <h3 className="max-[950px]:min-[650px]:text-[1.1rem] max-[350px]:text-[1.2rem] m-0 mx-auto max-w-[350px] text-[1.5rem] font-black text-white md:max-w-full">
         {name}
       </h3>

src/pageLayouts/DocsPage.tsx

@@ -114,7 +114,7 @@ function DocsPage() {
   return (
     <div className={`${theme === "dark" ? "dark" : ""}`}>
       <div
-        className={`bg-white text-center font-inter text-docs-page-black transition-colors duration-[0.3s] dark:bg-[#0e1111] dark:text-white`}
+        className={`bg-white text-center text-docs-page-black transition-colors duration-[0.3s] dark:bg-[#0e1111] dark:text-white`}
       >
         <header className="flex min-h-screen flex-col">
           <div className="relative" id="docsPageTop">
@@ -153,7 +153,7 @@ function DocsPage() {
                   to="docsPage__techGuidesSection"
                 >
                   <li className="relative mx-5 list-none pb-[5px] after:absolute after:left-0 after:h-[3px] after:w-0 after:bg-primary-green after:transition-all after:duration-500 after:content-[''] hover:after:w-full">
-                    <div className="py-1 font-inter text-base font-thin uppercase text-docs-page-black no-underline dark:text-white">
+                    <div className="py-1 text-base font-thin uppercase text-docs-page-black no-underline dark:text-white">
                       <Emoji symbol="📚 " />
                       Tech Guides
                     </div>
@@ -167,7 +167,7 @@ function DocsPage() {
                   to="docsPage__brandingSection"
                 >
                   <li className="relative mx-5 list-none pb-[5px] after:absolute after:left-0 after:h-[3px] after:w-0 after:bg-primary-green after:transition-all after:duration-500 after:content-[''] hover:after:w-full">
-                    <div className="py-1 font-inter text-base font-thin uppercase text-docs-page-black no-underline dark:text-white">
+                    <div className="py-1 text-base font-thin uppercase text-docs-page-black no-underline dark:text-white">
                       <Emoji symbol="📓 " />
                       Branding
                     </div>
@@ -181,7 +181,7 @@ function DocsPage() {
                   to="docsPage__reachOutSection"
                 >
                   <li className="relative mx-5 list-none pb-[5px] after:absolute after:left-0 after:h-[3px] after:w-0 after:bg-primary-green after:transition-all after:duration-500 after:content-[''] hover:after:w-full">
-                    <div className="py-1 font-inter text-base font-thin uppercase text-docs-page-black no-underline dark:text-white">
+                    <div className="py-1 text-base font-thin uppercase text-docs-page-black no-underline dark:text-white">
                       <Emoji symbol="📤 " />
                       Reach Out
                     </div>
@@ -199,7 +199,7 @@ function DocsPage() {
             ></motion.img>
           </div>
 
-          <p className="mx-auto mb-[60px] mt-[30px] w-3/4 font-inter text-xl font-bold text-docs-page-black dark:text-white">
+          <p className="mx-auto mb-[60px] mt-[30px] w-3/4 text-xl font-bold text-docs-page-black dark:text-white">
             Information, guides, and resources for Tech Start UCalgary members
           </p>
 

src/pageLayouts/GalleryPage.tsx

@@ -11,7 +11,7 @@ interface PhotoProps {
 const GalleryPage = ({ picUrls }: PhotoProps) => {
   return (
     <div
-      className="relative box-border min-h-screen overflow-hidden scroll-smooth whitespace-normal bg-gradient-to-b from-dark-background to-dark-background-end p-0 font-[Inter]"
+      className="relative box-border min-h-screen overflow-hidden scroll-smooth whitespace-normal bg-gradient-to-b from-dark-background to-dark-background-end p-0"
       id="galleryPageTop"
     >
       <Blobbie
@@ -26,7 +26,7 @@ const GalleryPage = ({ picUrls }: PhotoProps) => {
         transform="translate(-10vw, 10vw)"
         width={250}
       />
-      <div className="text-center text-title-size text-white">
+      <div className="text-center text-title-size font-bold text-white">
         <motion.h1
           animate={{ opacity: 1 }}
           initial={{ opacity: 0 }}

src/pageLayouts/MerchPage.styles.ts

@@ -4,7 +4,7 @@ export const MerchPage = styled.div`
   scroll-behavior: smooth;
   border: none;
   box-sizing: border-box;
-  font-family: "Inter", Tahoma, sans-serif;
+
   line-height: 1.5;
   height: 100%;
   padding: 0;

src/pageLayouts/ProjectsPage.tsx

@@ -23,7 +23,7 @@ const ProjectsPage = () => {
   );
   return (
     <div
-      className="[&>h2]: relative box-border size-full overflow-hidden scroll-smooth whitespace-normal bg-dark-background px-[3wv] py-0 font-sans"
+      className="[&>h2]: relative box-border size-full overflow-hidden scroll-smooth whitespace-normal bg-dark-background px-[3wv] py-0"
       id="projectsPageTop"
     >
       {/* // eslint-disable-next-line prettier/prettier */}

src/pageLayouts/SparkPage.css

@@ -28,7 +28,7 @@
   justify-items: center;
 }
 .sparkBackground {
-  font-family: "Inter", Tahoma, sans-serif;
+
   color: #99e755;
   background-color: #282a36;
   padding: 10px;
@@ -41,13 +41,13 @@
   background: #282a36;
 }
 .sparkTitle {
-  font-family: "Inter", Tahoma, sans-serif;
+
   text-align: center;
   font-size: 3rem;
   font-weight: 700;
 }
 .sparkContentTitle {
-  font-family: "Inter", Tahoma, sans-serif;
+
   text-align: left;
   font-size: 2rem;
   font-weight: 700;
@@ -98,7 +98,7 @@
 
 .techspark_about {
   text-align: center;
-  font-family: "Inter", Tahoma, sans-serif;
+
   padding-bottom: 10px;
 }
 

src/pages/_app.tsx

@@ -11,7 +11,7 @@ import Footer from "@/components/Footer/Footer";
 import GradientDef from "@/components/icons/GradientDef";
 import "../components/ProjectSection/carousel-with-custom-dots.css"; // used in ProjectSection.tsx
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 
 export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -25,7 +25,7 @@ export default function App({ Component, pageProps }: AppProps) {
         <link href="/favicon.png" rel="icon" />
       </Head>
       <ScrollToTop />
-      <div className={inter.className}>
+      <div className={`${inter.variable} font-sans`}>
         <GradientDef />
         <Navbar />
         <Component {...pageProps} />

src/styles/globals.css

@@ -35,7 +35,7 @@
   --babyHeading-size: 1.6rem;
   --chonky-header-weight: 900;
   --regular-font: 1.2rem;
-  font-family: "Inter", Tahoma, sans-serif;
+  font-family: var(--font-inter), Tahoma, sans-serif;
 
   /* Section backgrounds*/
   --dark-background: linear-gradient(

tailwind.config.ts

@@ -21,10 +21,10 @@ const config: Config = {
         "primary-green": "#4dd6a8",
       },
       fontFamily: {
-        Inter: ["Inter", "Tahoma", "sans-serif"],
+        Inter: ["var(--font-inter)", "Tahoma", "sans-serif"],
         console: ["Consolas", "monaco", "monospace"],
-        sans: ["Inter", "Tahoma", "sans-serif"],
-        inter: ['"Inter"', "Tahoma", "sans-serif"],
+        sans: ["var(--font-inter)", "Tahoma", "sans-serif"],
+        inter: ["var(--font-inter)", "Tahoma", "sans-serif"],
       },
       fontSize: {
         "babyHeading-size": "1.6rem",