From 2a63e10fbf0fdf7c89d62d2a48dfa0b4456c3ebf Mon Sep 17 00:00:00 2001
From: ahong75 <anthonyhong2003@gmail.com>
Date: Mon, 30 Oct 2023 12:05:44 -0400
Subject: [PATCH] fix: font styling

---
 .../AddStandard/AddStandardForm.jsx           |  9 +++++++-
 src/components/AddStandard/CreateTag.jsx      |  3 ++-
 .../AddStandard/EditAddStandard.jsx           |  9 ++++----
 .../ArchivedReportView/ArchivedReportView.jsx |  8 ++++++-
 src/components/FormComponents/Error.jsx       |  6 ++++-
 .../FormComponents/InputControl.jsx           |  8 ++++++-
 src/components/FormComponents/Multiselect.jsx |  3 ++-
 .../FormComponents/TextareaControl.jsx        | 15 +++++++++++--
 .../Login/LoginComponent/LoginComponent.jsx   | 18 ++++++++++++---
 .../BuildingTypeModal/BuildingTypeModal.jsx   | 10 +++++++--
 src/components/Modals/CardModal/CardModal.jsx | 11 ++++++++--
 .../Modals/CardModal/ConfirmActionModal.jsx   |  4 +++-
 .../ConfirmActionModal/ConfirmActionModal.jsx |  6 ++++-
 src/components/NavBar/NavBar.jsx              | 10 ++++++++-
 src/components/Notes/AddNewNote.jsx           |  1 +
 src/components/Notes/ModalNotes.jsx           | 10 +++++----
 src/components/Notes/ReportNotes.jsx          |  2 +-
 .../RecentStandardsView.jsx                   |  4 +++-
 src/components/SearchBar/SearchBar.jsx        |  6 +++--
 .../ShoppingCartView/ShoppingCartItem.jsx     |  9 ++++++--
 .../ShoppingCartView/ShoppingCartView.jsx     | 14 ++++++++++--
 .../StandardCard/ReportStandard.jsx           | 22 +++++++++++++++----
 src/components/StandardCard/StandardCard.jsx  |  4 ++++
 src/components/Tag/TagSelect.jsx              |  1 +
 src/pages/_document.jsx                       |  4 ++++
 .../[primaryCategory]/index.jsx               |  8 +++----
 src/pages/report-builder.jsx                  |  5 +++++
 27 files changed, 167 insertions(+), 43 deletions(-)

diff --git a/src/components/AddStandard/AddStandardForm.jsx b/src/components/AddStandard/AddStandardForm.jsx
index 3ddcd97e..ea448659 100644
--- a/src/components/AddStandard/AddStandardForm.jsx
+++ b/src/components/AddStandard/AddStandardForm.jsx
@@ -135,7 +135,14 @@ const AddStandardForm = () => {
       {({ handleSubmit, values }) => (
         <Box p={14} pb={14} w="full" as="form" onSubmit={handleSubmit}>
           <HStack>
-            <Heading as="h1" size="xl" color="Grey" textAlign="left" my={2}>
+            <Heading
+              as="h1"
+              size="xl"
+              color="#515254"
+              textAlign="left"
+              my={2}
+              fontFamily="Roboto Slab"
+            >
               Add a New Standard
             </Heading>
 
diff --git a/src/components/AddStandard/CreateTag.jsx b/src/components/AddStandard/CreateTag.jsx
index 67d0323a..015ab99a 100644
--- a/src/components/AddStandard/CreateTag.jsx
+++ b/src/components/AddStandard/CreateTag.jsx
@@ -37,7 +37,8 @@ const CreateTag = () => {
     <Box mb={4}>
       <FormLabel
         fontSize="xl"
-        color="#8C8C8C"
+        color="#51524"
+        fontFamily="'Europa-Bold', sans-serif"
         fontWeight="bold"
         textAlign="left"
         mb={1}
diff --git a/src/components/AddStandard/EditAddStandard.jsx b/src/components/AddStandard/EditAddStandard.jsx
index 1d01c280..9824d4c3 100644
--- a/src/components/AddStandard/EditAddStandard.jsx
+++ b/src/components/AddStandard/EditAddStandard.jsx
@@ -40,14 +40,15 @@ const EditAddStandard = ({ handleSubmit }) => {
     capitalizeAndRemoveDash(buildingType.name)
   );
   return (
-    <Box>
+    <Box fontFamily="'Europa-Regular', sans-serif">
       <Box w="50%">
         <MassUpload name="massUpload" />
 
         <FormLabel
-          fontSize="xl"
+          fontSize="2xl"
           fontWeight="bold"
-          color="#8C8C8C"
+          fontFamily="'Europa-Bold', sans-serif"
+          color="#515254"
           mb={1}
           mt={5}
         >
@@ -76,7 +77,7 @@ const EditAddStandard = ({ handleSubmit }) => {
         />
       </Box>
 
-      <FormLabel fontSize="xl" fontWeight="bold" color="#8C8C8C" mb={1} mt={5}>
+      <FormLabel fontSize="xl" fontWeight="bold" color="#515254" mb={1} mt={5}>
         Tags
       </FormLabel>
 
diff --git a/src/components/ArchivedReportView/ArchivedReportView.jsx b/src/components/ArchivedReportView/ArchivedReportView.jsx
index 8ea91014..c4cfd294 100644
--- a/src/components/ArchivedReportView/ArchivedReportView.jsx
+++ b/src/components/ArchivedReportView/ArchivedReportView.jsx
@@ -11,7 +11,13 @@ const ArchivedReportView = () => {
   console.log(archivedReports);
   return (
     <>
-      <Heading fontSize="1.5em">Completed Reports</Heading>
+      <Heading
+        fontSize="1.5em"
+        fontFamily="'Roboto Slab'
+      , serif"
+      >
+        Completed Reports
+      </Heading>
       {user?.isLoggedIn && (
         <Link
           href="/archived-reports"
diff --git a/src/components/FormComponents/Error.jsx b/src/components/FormComponents/Error.jsx
index 14369510..444cafa3 100644
--- a/src/components/FormComponents/Error.jsx
+++ b/src/components/FormComponents/Error.jsx
@@ -5,7 +5,11 @@ const Error = ({ name }) => {
   const {
     meta: { error },
   } = useField(name, { subscription: { error: true } });
-  return <FormErrorMessage>{error}</FormErrorMessage>;
+  return (
+    <FormErrorMessage fontFamily="'Europa-Regular', sans-serif">
+      {error}
+    </FormErrorMessage>
+  );
 };
 
 export default Error;
diff --git a/src/components/FormComponents/InputControl.jsx b/src/components/FormComponents/InputControl.jsx
index 537fda48..f7c5ce20 100644
--- a/src/components/FormComponents/InputControl.jsx
+++ b/src/components/FormComponents/InputControl.jsx
@@ -8,7 +8,12 @@ const InputControl = ({ name, label, type, ...props }) => {
   return (
     <Control name={name}>
       <HStack>
-        <FormLabel htmlFor={name} m={0} color="Grey">
+        <FormLabel
+          htmlFor={name}
+          m={0}
+          color="Grey"
+          fontFamily="'Europa-Regular', sans-serif"
+        >
           {label}
         </FormLabel>
         <Error name={name} />
@@ -20,6 +25,7 @@ const InputControl = ({ name, label, type, ...props }) => {
         isInvalid={meta.error && meta.touched}
         id={name}
         type={type}
+        fontFamily="'Europa-Regular', sans-serif"
       />
     </Control>
   );
diff --git a/src/components/FormComponents/Multiselect.jsx b/src/components/FormComponents/Multiselect.jsx
index d3374f2f..804e66ea 100644
--- a/src/components/FormComponents/Multiselect.jsx
+++ b/src/components/FormComponents/Multiselect.jsx
@@ -12,7 +12,8 @@ const Multiselect = ({ name, label, entries }) => {
           m={0}
           fontSize="xl"
           fontWeight="bold"
-          color="#8C8C8C"
+          fontFamily="'Europa-Bold', sans-serif"
+          color="#515254"
         >
           {label}
         </FormLabel>
diff --git a/src/components/FormComponents/TextareaControl.jsx b/src/components/FormComponents/TextareaControl.jsx
index cfc40f1c..c0074213 100644
--- a/src/components/FormComponents/TextareaControl.jsx
+++ b/src/components/FormComponents/TextareaControl.jsx
@@ -15,12 +15,23 @@ const AdaptedTextarea = ({ input, meta, ...rest }) => (
 const TextareaControl = ({ name, label, ...props }) => (
   <Control name={name}>
     <HStack>
-      <FormLabel htmlFor={name} m={0} color="Grey">
+      <FormLabel
+        htmlFor={name}
+        m={0}
+        color="Grey"
+        fontFamily="'Europa-Regular', sans-serif"
+      >
         {label}
       </FormLabel>
       <Error name={name} />
     </HStack>
-    <Field name={name} component={AdaptedTextarea} id={name} {...props} />
+    <Field
+      name={name}
+      component={AdaptedTextarea}
+      id={name}
+      fontFamily="'Europa-Regular', sans-serif"
+      {...props}
+    />
   </Control>
 );
 
diff --git a/src/components/Login/LoginComponent/LoginComponent.jsx b/src/components/Login/LoginComponent/LoginComponent.jsx
index 3cdeb808..eb43c57f 100644
--- a/src/components/Login/LoginComponent/LoginComponent.jsx
+++ b/src/components/Login/LoginComponent/LoginComponent.jsx
@@ -23,8 +23,14 @@ const LoginComponent = () => {
   };
 
   return (
-    <Flex direction="column" height="65%" width="60%" gap="1em">
-      <Text fontSize="3xl" as="b">
+    <Flex
+      direction="column"
+      height="65%"
+      width="60%"
+      gap="1em"
+      fontFamily="Europa-Regular"
+    >
+      <Text fontSize="3xl" as="b" fontFamily="Roboto Slab">
         Login
       </Text>
       <Box>
@@ -46,7 +52,13 @@ const LoginComponent = () => {
           />
         </FormControl>
       </Box>
-      <Button width="100%" height="2.3em" variant="Blue" onClick={handleSubmit}>
+      <Button
+        width="100%"
+        height="2.3em"
+        variant="Blue"
+        onClick={handleSubmit}
+        fontFamily="Europa-Bold"
+      >
         Log In
       </Button>
       {/* <Center gap="0.3em">
diff --git a/src/components/Modals/BuildingTypeModal/BuildingTypeModal.jsx b/src/components/Modals/BuildingTypeModal/BuildingTypeModal.jsx
index e77e8511..a39b8381 100644
--- a/src/components/Modals/BuildingTypeModal/BuildingTypeModal.jsx
+++ b/src/components/Modals/BuildingTypeModal/BuildingTypeModal.jsx
@@ -110,9 +110,15 @@ const BuildingTypeModal = ({ isOpen, onClose }) => {
         size={{ base: "xs", md: "2xl", lg: "4xl" }}
       >
         <ModalOverlay />
-        <ModalContent rounded={14}>
+        <ModalContent rounded={14} fontFamily="Europa-Regular">
           <ModalCloseButton right={2} top={0} m={4} />
-          <ModalHeader mt={8} mx={6} fontSize="4xl" color="#6D6E70">
+          <ModalHeader
+            mt={8}
+            mx={6}
+            fontSize="4xl"
+            color="#6D6E70"
+            fontFamily="Roboto Slab"
+          >
             Add A New Building Type
           </ModalHeader>
           <Form
diff --git a/src/components/Modals/CardModal/CardModal.jsx b/src/components/Modals/CardModal/CardModal.jsx
index 86462410..5857d70f 100644
--- a/src/components/Modals/CardModal/CardModal.jsx
+++ b/src/components/Modals/CardModal/CardModal.jsx
@@ -255,7 +255,7 @@ const CardModal = ({
       size={{ base: "xs", md: "2xl", lg: "4xl" }}
     >
       <ModalOverlay />
-      <ModalContent rounded={14}>
+      <ModalContent rounded={14} fontFamily="'Europa-Regular', sans-serif">
         <ModalCloseButton right={2} top={0} m={4} />
         <ModalHeader mt={10} mx={6}>
           <Flex
@@ -266,7 +266,9 @@ const CardModal = ({
             {editing ? (
               <InputControl name="title" size="lg"></InputControl>
             ) : (
-              <Heading mb={2}>{card.title}</Heading>
+              <Heading mb={2} fontFamily="'Roboto Slab', serif" color="#515254">
+                {card.title}
+              </Heading>
             )}
             {user?.isAdmin ? (
               !editing ? (
@@ -296,6 +298,7 @@ const CardModal = ({
                     whiteSpace="nowrap"
                     width="auto"
                     onClick={onDiscardChangesOpen}
+                    fontFamily="Europa-Bold"
                   >
                     Discard Changes
                   </Button>
@@ -310,6 +313,7 @@ const CardModal = ({
                     _active={{ bgColor: "#057b8f" }}
                     onClick={onSaveChangesOpen}
                     isDisabled={form.hasValidationErrors}
+                    fontFamily="Europa-Bold"
                   >
                     Save Changes
                   </Button>
@@ -602,6 +606,7 @@ const CardModal = ({
                     variant="Red"
                     size="lg"
                     onClick={onDeleteStandardOpen}
+                    fontFamily="Europa-Bold"
                   >
                     Delete Standard
                   </Button>
@@ -614,6 +619,7 @@ const CardModal = ({
                         setSelectedImage(0);
                         openImagePreviewCallback();
                       }}
+                      fontFamily="Europa-Bold"
                     >
                       View Notes
                     </Button>
@@ -622,6 +628,7 @@ const CardModal = ({
                       variant="Blue-rounded"
                       size="lg"
                       isDisabled={user?.isLoggedIn ? false : true}
+                      fontFamily="Europa-Bold"
                     >
                       {!selected
                         ? "Add to Report"
diff --git a/src/components/Modals/CardModal/ConfirmActionModal.jsx b/src/components/Modals/CardModal/ConfirmActionModal.jsx
index 195afa8d..9cb8be85 100644
--- a/src/components/Modals/CardModal/ConfirmActionModal.jsx
+++ b/src/components/Modals/CardModal/ConfirmActionModal.jsx
@@ -53,7 +53,7 @@ const ConfirmActionModal = ({
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered={true}>
       <ModalOverlay />
-      <ModalContent rounded={14}>
+      <ModalContent rounded={14} fontFamily="Europa-Regular">
         <ModalHeader
           pt={10}
           display="flex"
@@ -81,6 +81,7 @@ const ConfirmActionModal = ({
               fontSize="md"
               width="auto"
               onClick={onClose}
+              fontFamily="Europa-Bold"
             >
               {abandonActionText}
             </Button>
@@ -91,6 +92,7 @@ const ConfirmActionModal = ({
               fontSize="md"
               width="auto"
               onClick={handleAction}
+              fontFamily="Europa-Bold"
             >
               {confirmActionText}
             </Button>
diff --git a/src/components/Modals/ConfirmActionModal/ConfirmActionModal.jsx b/src/components/Modals/ConfirmActionModal/ConfirmActionModal.jsx
index 2fe46ea9..eefd9de2 100644
--- a/src/components/Modals/ConfirmActionModal/ConfirmActionModal.jsx
+++ b/src/components/Modals/ConfirmActionModal/ConfirmActionModal.jsx
@@ -32,7 +32,7 @@ const ConfirmActionModal = ({
     {...rest}
   >
     <ModalOverlay />
-    <ModalContent rounded={14} display="flex">
+    <ModalContent rounded={14} display="flex" fontFamily="Europa-Regular">
       <ModalHeader
         pt={10}
         display="flex"
@@ -65,6 +65,8 @@ const ConfirmActionModal = ({
             size="sm"
             fontSize="md"
             width="auto"
+            fontWeight="700"
+            fontFamily="Europa-Bold"
             onClick={handleCancelAction ? handleCancelAction : onClose}
           >
             {cancelButtonText}
@@ -74,6 +76,8 @@ const ConfirmActionModal = ({
             size="sm"
             fontSize="md"
             width="auto"
+            fontWeight="700"
+            fontFamily="Europa-Bold"
             onClick={handleAction}
           >
             {confirmButtonText}
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 9837fb51..b8c812c6 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -51,7 +51,14 @@ const NavBar = () => {
 
   const NavLinkAuth = (props) => {
     if (!user?.isLoggedIn) {
-      return <NavLink name="Login" href={urls.pages.login} {...props} />;
+      return (
+        <NavLink
+          fontFamily="Europa-Regular"
+          name="Login"
+          href={urls.pages.login}
+          {...props}
+        />
+      );
     } else {
       return (
         <Flex align="center">
@@ -218,6 +225,7 @@ const NavBar = () => {
               fontSize="lg"
               onClick={onCartOpen}
               style={shoppingCartButtonStyle}
+              fontFamily="Europa-Regular"
             >
               {<Icon as={FiChevronsUp} mr="1" fontSize="xl" />} Report Preview
             </Button>
diff --git a/src/components/Notes/AddNewNote.jsx b/src/components/Notes/AddNewNote.jsx
index 3bed24d1..2d4a39ce 100644
--- a/src/components/Notes/AddNewNote.jsx
+++ b/src/components/Notes/AddNewNote.jsx
@@ -49,6 +49,7 @@ const AddNewNote = ({ newNote, setNewNote, createNewNote }) => {
         color="Grey"
         value={newNote.body}
         fontSize="sm"
+        fontFamily="Europa-Regular"
         onChange={(val) => handleChange(val)}
         submitOnBlur={false}
         onSubmit={() => {
diff --git a/src/components/Notes/ModalNotes.jsx b/src/components/Notes/ModalNotes.jsx
index abfed12d..dd9c498e 100644
--- a/src/components/Notes/ModalNotes.jsx
+++ b/src/components/Notes/ModalNotes.jsx
@@ -4,8 +4,8 @@ import {
   // Button,
   Circle,
   Flex,
-  Heading,
   HStack,
+  Heading,
   IconButton,
   Text,
   VStack,
@@ -16,9 +16,9 @@ import useSWR, { mutate } from "swr";
 import { thumbsDown, thumbsUp, thumbsUpAndDown } from "../../actions/Card";
 import useUser from "../../lib/hooks/useUser";
 import AddNewNote from "./AddNewNote";
+import InformationPreview from "./InformationPreview";
 import Note from "./Note";
 import SentimentButton from "./SentimentButton";
-import InformationPreview from "./InformationPreview";
 
 export default function ModalNotes({
   selState,
@@ -102,7 +102,7 @@ export default function ModalNotes({
       justifyContent="space-between"
     >
       <VStack alignItems="left" w="100%" maxH={{ xl: "86%", "2xl": "89%" }}>
-        <Heading size="lg" mt={3} mb={2}>
+        <Heading size="lg" mt={3} mb={2} fontFamily="Roboto Slab">
           Notes
         </Heading>
 
@@ -178,7 +178,9 @@ export default function ModalNotes({
         <Flex alignItems="end">
           <VStack alignItems="left" w="80%">
             <HStack>
-              <Text fontSize="sm">Was this image helpful?</Text>
+              <Text fontSize="sm" fontFamily="Europa-Regular">
+                Was this image helpful?
+              </Text>
               {user?.isAdmin ? (
                 <IconButton
                   bg="none"
diff --git a/src/components/Notes/ReportNotes.jsx b/src/components/Notes/ReportNotes.jsx
index 1564dc8b..aeb08a6e 100644
--- a/src/components/Notes/ReportNotes.jsx
+++ b/src/components/Notes/ReportNotes.jsx
@@ -51,7 +51,7 @@ export default function ReportNotes({
   return (
     <VStack alignItems="left">
       <VStack alignItems="left" w="100%">
-        <Heading textColor="#3F3F3F" size="md" mt={3} mb={-2}>
+        <Heading textColor="#515254" size="md" mt={3} mb={-2}>
           Notes ({currentNotes.length})
         </Heading>
         {currentNotes.length === 0 ? (
diff --git a/src/components/RecentStandardsView/RecentStandardsView.jsx b/src/components/RecentStandardsView/RecentStandardsView.jsx
index 740cb7e6..9ccec92d 100644
--- a/src/components/RecentStandardsView/RecentStandardsView.jsx
+++ b/src/components/RecentStandardsView/RecentStandardsView.jsx
@@ -8,7 +8,9 @@ function RecentStandardsView({ maxCards }) {
 
   return (
     <Flex flexDirection="column" gap="16px">
-      <Heading fontSize="1.5em">Recent Standards</Heading>
+      <Heading fontSize="1.5em" fontFamily="'Roboto Slab', serif">
+        Recent Standards
+      </Heading>
       <Link href="/library">
         <Button width="max" variant="Grey-outlined">
           <Text fontSize="xs">See All Standards</Text>
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index 0e71f3fd..17f336e7 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -11,13 +11,13 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-  Tag,
   Text,
   useDisclosure,
   useTheme,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { Form, useForm, useFormState } from "react-final-form";
+import Tag from "../Tag";
 
 const SearchBarComponent = (props) => {
   const {
@@ -154,7 +154,9 @@ const SearchBarComponent = (props) => {
             fontSize="lg"
             onClick={onToggle}
           >
-            <Text pr={3}>Filter {getNumTagsFiltered(values)}</Text>
+            <Text fontFamily="'Europa-Regular', sans-serif" pr={3}>
+              Filter {getNumTagsFiltered(values)}
+            </Text>
             <ChevronDownIcon />
           </Button>
         )}
diff --git a/src/components/ShoppingCartView/ShoppingCartItem.jsx b/src/components/ShoppingCartView/ShoppingCartItem.jsx
index d1c32a44..5b608b30 100644
--- a/src/components/ShoppingCartView/ShoppingCartItem.jsx
+++ b/src/components/ShoppingCartView/ShoppingCartItem.jsx
@@ -38,13 +38,18 @@ const ShoppingCartItem = ({ card, selState }) => {
           <Text fontSize="xl" as="b" noOfLines={1}>
             {card.title}
           </Text>
-          <Box>
+          <Box fontFamily="Europa-Regular">
             {selectedImages.length}{" "}
             {`image${selectedImages.length !== 1 ? "s" : ""}`} &middot;{" "}
             {selectedNotes.length}{" "}
             {`note${selectedNotes.length !== 1 ? "s" : ""}`}
           </Box>
-          <Button onClick={removeHandler} variant="Red-rounded" fontSize="xs">
+          <Button
+            onClick={removeHandler}
+            variant="Red-rounded"
+            fontSize="xs"
+            fontFamily="Europa-Bold"
+          >
             Remove from report
           </Button>
         </Box>
diff --git a/src/components/ShoppingCartView/ShoppingCartView.jsx b/src/components/ShoppingCartView/ShoppingCartView.jsx
index c2355658..e1e19cb0 100644
--- a/src/components/ShoppingCartView/ShoppingCartView.jsx
+++ b/src/components/ShoppingCartView/ShoppingCartView.jsx
@@ -58,7 +58,11 @@ const ShoppingCartView = ({ isOpen, onClose, ...rest }) => {
       <DrawerOverlay />
       <DrawerContent justifyContent="space-between">
         <Box>
-          <DrawerCloseButton fontSize="lg" style={closeButtonStyle}>
+          <DrawerCloseButton
+            fontSize="lg"
+            style={closeButtonStyle}
+            fontFamily="Europa-Regular"
+          >
             {<Icon as={FiChevronsDown} mr="1" fontSize="xl" />} Report Preview
           </DrawerCloseButton>
           <DrawerHeader display="flex" justifyContent="center">
@@ -70,7 +74,13 @@ const ShoppingCartView = ({ isOpen, onClose, ...rest }) => {
         <Box display="flex" justifyContent="center">
           {sels.length > 0 && (
             <Link href={urls.pages.reportbuilder}>
-              <Button variant="Grey-rounded" size="lg" marginBottom="20">
+              <Button
+                variant="Grey-rounded"
+                size="lg"
+                marginBottom="20"
+                fontWeight="700"
+                fontFamily="Europa-Bold"
+              >
                 View Full Report
               </Button>
             </Link>
diff --git a/src/components/StandardCard/ReportStandard.jsx b/src/components/StandardCard/ReportStandard.jsx
index c6e78323..9592c0de 100644
--- a/src/components/StandardCard/ReportStandard.jsx
+++ b/src/components/StandardCard/ReportStandard.jsx
@@ -23,17 +23,31 @@ const ReportStandard = ({ card, selState, ...props }) => {
   return (
     <Box {...props} p={0}>
       <HStack justify="space-between">
-        <Heading size="lg" mb={5} maxWidth="80%">
+        <Heading
+          size="lg"
+          mb={5}
+          maxWidth="80%"
+          fontFamily="'Roboto Slab', serif"
+        >
           {card.title}
         </Heading>
         <Box>
           {(!globalEditing || editing) && (
-            <Button variant="Grey-rounded" mr={3} onClick={editHandler}>
+            <Button
+              variant="Grey-rounded"
+              fontFamily="'Europa-Bold', sans-serif"
+              mr={3}
+              onClick={editHandler}
+            >
               {!editing ? "Edit" : "Save changes"}
             </Button>
           )}
           {!globalEditing && (
-            <Button variant="Red-rounded" onClick={removeHandler}>
+            <Button
+              variant="Red-rounded"
+              fontFamily="'Europa-Bold', sans-serif"
+              onClick={removeHandler}
+            >
               Remove
             </Button>
           )}
@@ -44,7 +58,7 @@ const ReportStandard = ({ card, selState, ...props }) => {
         selState={selState}
         editing={editing}
       />
-      <Heading textColor="#3F3F3F" size="md">
+      <Heading textColor="#515254" size="md">
         Criteria
       </Heading>
       <Box mb={5}>{card.criteria}</Box>
diff --git a/src/components/StandardCard/StandardCard.jsx b/src/components/StandardCard/StandardCard.jsx
index ac401e19..68ad7389 100644
--- a/src/components/StandardCard/StandardCard.jsx
+++ b/src/components/StandardCard/StandardCard.jsx
@@ -156,6 +156,8 @@ const StandardCard = ({ card, cards, setCards, ...props }) => {
                       rounded="14.7877px"
                       marginLeft={0.5}
                       minWidth="max-content"
+                      fontFamily="'Inter', sans-serif"
+                      color="#515254"
                     >
                       {tag}
                     </Tag>
@@ -174,6 +176,8 @@ const StandardCard = ({ card, cards, setCards, ...props }) => {
                 whiteSpace="nowrap"
                 // {...props}
                 w="35%"
+                fontWeight="500"
+                fontFamily="'Inter', sans-serif"
               >
                 {!selected ? "Add To Report" : "Del From Report"}
               </Button>
diff --git a/src/components/Tag/TagSelect.jsx b/src/components/Tag/TagSelect.jsx
index 91b8f2d2..72895822 100644
--- a/src/components/Tag/TagSelect.jsx
+++ b/src/components/Tag/TagSelect.jsx
@@ -45,6 +45,7 @@ const TagSelect = ({ tag }) => {
           w: "100%",
           textTransform: "capitalize",
           fontSize: { base: "0.8em", "2xl": "1em" },
+          fontFamily: "'Europa-Regular', sans-serif",
         }}
       >
         {tag.name}
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index 003fd5a6..cbb1c283 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -21,6 +21,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap"
             rel="stylesheet"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap"
+            rel="stylesheet"
+          ></link>
         </Head>
         <body>
           <Main />
diff --git a/src/pages/library/[buildingType]/[primaryCategory]/index.jsx b/src/pages/library/[buildingType]/[primaryCategory]/index.jsx
index 3d1ffd11..4a5c06a2 100644
--- a/src/pages/library/[buildingType]/[primaryCategory]/index.jsx
+++ b/src/pages/library/[buildingType]/[primaryCategory]/index.jsx
@@ -84,11 +84,9 @@ const LibraryCategoryPage = (props) => {
             </Link>
           </BreadcrumbItem>
           <BreadcrumbItem
-            style={{
-              color: theme.colors.boldGrey,
-              fontFamily: theme.fonts.headingBold,
-              fontWeight: theme.fonts.bold,
-            }}
+            color={theme.colors.boldGrey}
+            fontFamily={theme.fonts.headingBold}
+            fontWeight="300"
           >
             <Text>{props.primaryCategory}</Text>
           </BreadcrumbItem>
diff --git a/src/pages/report-builder.jsx b/src/pages/report-builder.jsx
index 9cc97f9c..6ee165aa 100644
--- a/src/pages/report-builder.jsx
+++ b/src/pages/report-builder.jsx
@@ -197,6 +197,7 @@ const ReportBuilder = () => {
                     onKeyPress={(e) => {
                       if (e.key === "Enter") e.preventDefault();
                     }}
+                    fontFamily="Roboto Slab"
                   >
                     {nameField || "Untitled Report"}
                   </Heading>
@@ -206,6 +207,7 @@ const ReportBuilder = () => {
                         minW="9rem"
                         variant="Grey-outlined-rounded"
                         onClick={handleDiscardChanges}
+                        fontFamily="'Europa-Bold', sans-serif"
                       >
                         Discard Changes
                       </Button>
@@ -216,6 +218,7 @@ const ReportBuilder = () => {
                         isDisabled={
                           !renamedData || renamedData.trim().length == 0
                         }
+                        fontFamily="'Europa-Bold', sans-serif"
                       >
                         Save Changes
                       </Button>
@@ -228,6 +231,7 @@ const ReportBuilder = () => {
                         setRenaming(true);
                         renameEditableRef.current.focus();
                       }}
+                      fontFamily="'Europa-Bold', sans-serif"
                     >
                       Rename
                     </Button>
@@ -241,6 +245,7 @@ const ReportBuilder = () => {
                   variant="Blue-rounded"
                   onClick={onOpen}
                   isDisabled={report?.cards?.length == 0}
+                  fontFamily="'Europa-Bold', sans-serif"
                 >
                   Complete Report
                 </Button>