diff --git a/src/App.js b/src/App.js
index 05a21ef..ef10f3e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,8 +8,8 @@ import React from "react";
 const App = () => {
   return (
     <StyledEngineProvider injectFirst>
+      <GlobalStyle />
       <RecoilRoot>
-        <GlobalStyle />
         <Router />
       </RecoilRoot>
     </StyledEngineProvider>
diff --git a/src/assets/fonts/Pretendard-Black.woff b/src/assets/fonts/Pretendard-Black.woff
new file mode 100644
index 0000000..79f4bf5
Binary files /dev/null and b/src/assets/fonts/Pretendard-Black.woff differ
diff --git a/src/assets/fonts/Pretendard-Bold.woff b/src/assets/fonts/Pretendard-Bold.woff
new file mode 100644
index 0000000..3efc58e
Binary files /dev/null and b/src/assets/fonts/Pretendard-Bold.woff differ
diff --git a/src/assets/fonts/Pretendard-ExtraBold.woff b/src/assets/fonts/Pretendard-ExtraBold.woff
new file mode 100644
index 0000000..14dd2db
Binary files /dev/null and b/src/assets/fonts/Pretendard-ExtraBold.woff differ
diff --git a/src/assets/fonts/Pretendard-ExtraLight.woff b/src/assets/fonts/Pretendard-ExtraLight.woff
new file mode 100644
index 0000000..e4faea2
Binary files /dev/null and b/src/assets/fonts/Pretendard-ExtraLight.woff differ
diff --git a/src/assets/fonts/Pretendard-Light.woff b/src/assets/fonts/Pretendard-Light.woff
new file mode 100644
index 0000000..c28c461
Binary files /dev/null and b/src/assets/fonts/Pretendard-Light.woff differ
diff --git a/src/assets/fonts/Pretendard-Medium.woff b/src/assets/fonts/Pretendard-Medium.woff
new file mode 100644
index 0000000..6c0ec52
Binary files /dev/null and b/src/assets/fonts/Pretendard-Medium.woff differ
diff --git a/src/assets/fonts/Pretendard-Regular.woff b/src/assets/fonts/Pretendard-Regular.woff
new file mode 100644
index 0000000..e857dba
Binary files /dev/null and b/src/assets/fonts/Pretendard-Regular.woff differ
diff --git a/src/assets/fonts/Pretendard-SemiBold.woff b/src/assets/fonts/Pretendard-SemiBold.woff
new file mode 100644
index 0000000..0c2a000
Binary files /dev/null and b/src/assets/fonts/Pretendard-SemiBold.woff differ
diff --git a/src/assets/fonts/Pretendard-Thin.woff b/src/assets/fonts/Pretendard-Thin.woff
new file mode 100644
index 0000000..4927af4
Binary files /dev/null and b/src/assets/fonts/Pretendard-Thin.woff differ
diff --git a/src/assets/fonts/index.js b/src/assets/fonts/index.js
new file mode 100644
index 0000000..24f6a27
--- /dev/null
+++ b/src/assets/fonts/index.js
@@ -0,0 +1,2 @@
+import { createGlobalStyle } from "styled-components";
+import Pretendard-Medium from "./Pretendard-Medium.woff";
\ No newline at end of file
diff --git a/src/components/common/AddTripDialog.js b/src/components/common/AddTripDialog.js
index abf5301..69cebb4 100644
--- a/src/components/common/AddTripDialog.js
+++ b/src/components/common/AddTripDialog.js
@@ -34,13 +34,13 @@ export default function AddTripDialog(props) {
         <AddlstItm disableGutters onClick={goToAdd}>
           <AddItemBtn onClick={handleClose}>
             <IconImg src={Person} />
-            <ListItemText>여행 추가하기</ListItemText>
+            <LstItmTxt>여행 추가하기</LstItmTxt>
           </AddItemBtn>
         </AddlstItm>
         <AddlstItm disableGutters onClick={goToParticipate}>
           <AddItemBtn onClick={handleClose}>
             <IconImg src={People} />
-            <ListItemText>친구 여행 참여하기</ListItemText>
+            <LstItmTxt>친구 여행 참여하기</LstItmTxt>
           </AddItemBtn>
         </AddlstItm>
       </AddList>
@@ -89,3 +89,8 @@ const AddItemBtn = styled(ListItemButton)`
 const IconImg = styled.img`
   margin-right: 0.7rem;
 `;
+
+const LstItmTxt = styled(ListItemText)`
+  font-family: var(--pretendard-regular);
+`;
+
diff --git a/src/components/common/CancelContent.js b/src/components/common/CancelContent.js
index 0297907..2db4661 100644
--- a/src/components/common/CancelContent.js
+++ b/src/components/common/CancelContent.js
@@ -30,6 +30,7 @@ const TitleTypo = styled(Typography)`
   font-weight: bolder;
   font-size: 1.8rem;
   margin-bottom: 0.5rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const ContentDiv =styled.div`
diff --git a/src/components/common/DelTripContent.js b/src/components/common/DelTripContent.js
index 29b7c3f..3e48954 100644
--- a/src/components/common/DelTripContent.js
+++ b/src/components/common/DelTripContent.js
@@ -29,6 +29,8 @@ const TitleTypo = styled(Typography)`
   font-weight: bolder;
   font-size: 1.8rem;
   margin-bottom: 0.5rem;
+  font-family: var(--pretendard-medium);
+  letter-spacing: 1px;
 `;
 
 const ContentDiv =styled.div`
diff --git a/src/components/common/DiaryListItem.js b/src/components/common/DiaryListItem.js
index 11dfe61..6361a58 100644
--- a/src/components/common/DiaryListItem.js
+++ b/src/components/common/DiaryListItem.js
@@ -93,8 +93,8 @@ const TitleP = styled.p`
   color: ${COLOR.MAIN_BLACK};
   font-size: 1.8rem;
   font-weight: bold;
-  font-family: var(--inter-extrabold);
-  margin-bottom: 0.5rem;
+  font-family: var(--pretendard-medium);
+  margin-bottom: 0.7rem;
 `;
 
 const DateDiv = styled.div`
@@ -106,11 +106,13 @@ const DateP = styled.p`
   font-size: 1.3rem;
   color: rgba(119, 119, 119);
   border-right: 1px solid rgba(119, 119, 119);
-  padding-right: 0.3rem;
+  padding-right: 0.5rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const UserP = styled.p`
-  font-size: 1rem;
+  font-size: 1.1rem;
   color: rgba(119, 119, 119);
-  padding-left: 0.3rem;
+  padding-left: 0.5rem;
+  font-family: var(--pretendard-medium);
 `;
diff --git a/src/components/common/DiaryPreviewContent.js b/src/components/common/DiaryPreviewContent.js
index 9ef34bb..5875d75 100644
--- a/src/components/common/DiaryPreviewContent.js
+++ b/src/components/common/DiaryPreviewContent.js
@@ -147,6 +147,7 @@ const TitleDiv = styled.div`
   padding: 0.5rem 2.2rem 0.3rem 2.2rem;
   display: flex;
   align-items: center;
+  font-family: var(--pretendard-medium);
 `;
 
 const DateDiv = styled.div`
@@ -157,6 +158,7 @@ const DateDiv = styled.div`
   color: gray;
   display: flex;
   align-items: center;
+  font-family: var(--pretendard-medium);
 `;
 
 const Button = styled.button`
@@ -167,6 +169,7 @@ const Button = styled.button`
   border: none;
   font-size: 2rem;
   cursor: pointer;
+  font-family: var(--pretendard-medium);
 `;
 
 const ButtonLeft = styled(Button)`
@@ -195,4 +198,5 @@ const GotoDiaryBtn = styled.button`
   color: white;
   font-weight: bolder;
   margin: 1rem 0rem;
+  font-family: var(--pretendard-medium);
 `;
diff --git a/src/components/common/FriendList.js b/src/components/common/FriendList.js
index 13ebf99..31dace6 100644
--- a/src/components/common/FriendList.js
+++ b/src/components/common/FriendList.js
@@ -34,7 +34,7 @@ const MyFriend = styled.p`
   padding: 2rem;
   margin: 0rem 0.5rem;
   font-size: 2rem;
-  font-weight: 900;
+  font-family: var(--pretendard-bold);
 `;
 
 const FriendItemDiv = styled.div`
@@ -54,8 +54,8 @@ const FriendImg = styled.img`
 
 const FriendNameDiv = styled.div`
   font-size: 1.8rem;
-  font-weight: 900;
   display: flex;
   align-items: center;
   margin: 1rem 1.5rem;
+  font-family: var(--pretendard-semibold);
 `;
diff --git a/src/components/common/RecomListItem.js b/src/components/common/RecomListItem.js
index cb64ab9..b7c771f 100644
--- a/src/components/common/RecomListItem.js
+++ b/src/components/common/RecomListItem.js
@@ -89,4 +89,5 @@ const TitleP = styled.p`
   font-weight: bold;
   margin-bottom: 0.5rem;
   margin-right: 0.2rem;
+  font-family: var(--pretendard-medium);
 `;
diff --git a/src/components/common/TripCalendar.js b/src/components/common/TripCalendar.js
index 1949832..7e59ff4 100644
--- a/src/components/common/TripCalendar.js
+++ b/src/components/common/TripCalendar.js
@@ -102,9 +102,7 @@ const TripCalendar = ({ diaryInfo }) => {
         tileClassName={tileClassName}
       />
       <Drawer anchor="bottom" open={isOpen} onClose={toggleDrawer(false)}>
-        <DiaryModal
-          content={<DiaryPreviewContent diaries={selectedDiary} />}
-        />
+        <DiaryModal content={<DiaryPreviewContent diaries={selectedDiary} />} />
       </Drawer>
     </CalendarWrapper>
   );
@@ -169,6 +167,7 @@ const CalendarStyle = styled(Calendar)`
   .react-calendar__navigation__label {
     font-size: 2.5rem;
     font-weight: 600;
+    font-family: var(--pretendard-medium);
   }
 
   .react-calendar__tile {
@@ -179,6 +178,7 @@ const CalendarStyle = styled(Calendar)`
     display: flex;
     justify-content: center;
     align-items: center;
+    font-family: var(--pretendard-medium);
   }
 
   .react-calendar__month-view__weekdays__weekday {
@@ -189,6 +189,7 @@ const CalendarStyle = styled(Calendar)`
     justify-content: center;
     align-items: center;
     text-align: center;
+    font-family: var(--pretendard-medium);
   }
   .react-calendar__month-view__weekdays__weekday--weekend abbr[title="Sunday"] {
     //일요일에 빨간 폰트
diff --git a/src/components/common/TripListItem.js b/src/components/common/TripListItem.js
index 75f8938..748cc86 100644
--- a/src/components/common/TripListItem.js
+++ b/src/components/common/TripListItem.js
@@ -72,7 +72,7 @@ export default function TripListItem(props) {
             </p>
           </ModiDiv>
           <DelDiv>
-            <p style={{ color: "#a1a1a1" }} onClick={toggleModal}>
+            <p style={{ color: "#a1a1a1"}} onClick={toggleModal}>
               삭제
             </p>
           </DelDiv>
@@ -124,8 +124,9 @@ const TitleP = styled.p`
   color: ${COLOR.MAIN_EMER};
   font-size: 1.2rem;
   font-weight: bold;
-  font-family: var(--inter-extrabold);
+  font-family: var(--pretendard-regular);
   margin-bottom: 0.1rem;
+  letter-spacing: 1px;
 `;
 
 const DateP = styled.p`
@@ -143,6 +144,7 @@ const LocationDiv = styled.div`
 const LocationP = styled.p`
   font-size: 0.8rem;
   color: rgba(119, 119, 119);
+  font-family: var(--pretendard-medium);
 `;
 
 const DeleteDiv = styled.div`
@@ -178,6 +180,7 @@ const YesBtn = styled.button`
   font-size: 1.3rem;
   color: white;
   font-weight: bolder;
+  font-family: var(--pretendard-medium);
 `;
 
 const NoBtn = styled.button`
@@ -189,4 +192,5 @@ const NoBtn = styled.button`
   font-size: 1.3rem;
   color: black;
   font-weight: bolder;
+  font-family: var(--pretendard-medium);
 `;
diff --git a/src/components/common/map/MapDrawer.js b/src/components/common/map/MapDrawer.js
index 5ce5717..397b71f 100644
--- a/src/components/common/map/MapDrawer.js
+++ b/src/components/common/map/MapDrawer.js
@@ -72,11 +72,15 @@ const InfoDiv = styled.div`
 const TitleP = styled.p`
   font-size: 2.2rem;
   font-weight: 800;
+  font-family: var(--pretendard-medium);
+  margin-bottom: 0.2rem;
+  letter-spacing: 1px;
 `;
 
 const DataP = styled.p`
   color: rgba(119, 119, 119);
   font-size: 1.3rem;
+  font-family: var(--pretendard-regular);
 `;
 
 const LocationDiv = styled.div`
@@ -87,19 +91,21 @@ const LocationDiv = styled.div`
 `;
 
 const LocationP = styled.p`
-  font-size: 1rem;
+  font-size: 1.2rem;
   color: rgba(119, 119, 119);
   margin-left: 0.3rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const GoToTripBtn = styled(Button)`
   color: ${COLOR.MAIN_WHITE};
-  font-size: 1.3rem;
+  font-size: 1.5rem;
   background-color: ${COLOR.MAIN_EMER};
   width: 90%;
   height: 4rem;
   border-radius: 10rem;
   font-weight: 800;
+  font-family: var(--pretendard-semibold);
   box-shadow: 0.2rem 0.2rem 0.2rem rgba(180, 180, 180);
   margin-top: 2rem;
   &:hover {
diff --git a/src/index.css b/src/index.css
index e1ce787..b9c14c6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,7 +21,39 @@ code {
   font-family: "InterExtraBold";
   src: url(./assets/fonts/Inter/static/Inter-ExtraBold.ttf);
 }
+
+@font-face {
+  font-family: "PretendardLight";
+  src: url(./assets/fonts/Pretendard-Light.woff);
+}
+
+@font-face {
+  font-family: "PretendardExtraLight";
+  src: url(./assets/fonts/Pretendard-ExtraLight.woff);
+}
+
+
+@font-face {
+  font-family: "PretendardBold";
+  src: url(./assets/fonts/Pretendard-Bold.woff);
+}
+
+@font-face {
+  font-family: "PretendardSemibold";
+  src: url(./assets/fonts/Pretendard-SemiBold.woff);
+}
+
+@font-face {
+  font-family: "PretendardRegular";
+  src: url(./assets/fonts/Pretendard-Regular.woff);
+}
+
 :root{
   --inter-medium: "InterMedium";
   --inter-extrabold: "InterExtraBold";
+  --pretendard-medium: "PretendardLight";
+  --pretendard-bold: "PretendardBold";
+  --pretendard-regular: "PretendardRegular";
+  --pretendard-semibold: "PretendardSemibold";
+  --pretendard-extralight: "PretendardExtraLight";
 }
\ No newline at end of file
diff --git a/src/pages/CalendarPage.js b/src/pages/CalendarPage.js
index b4457ee..5bbd1ca 100644
--- a/src/pages/CalendarPage.js
+++ b/src/pages/CalendarPage.js
@@ -5,7 +5,7 @@ import TripCalendar from "../components/common/TripCalendar";
 import BottomNav from "../layout/BottomNav";
 import { COLOR } from "../styles/color";
 import axios from "axios";
-
+import { Typography } from "@mui/material";
 const CalendarPage = () => {
   const SERVER_URL = process.env.REACT_APP_SERVER_URL;
   const [diaryInfo, setDiaryInfo] = useState([]);
@@ -37,18 +37,36 @@ const CalendarPage = () => {
 
 
   return (
-    <div>
-      <Title>내 캘린더</Title>
+    <StCalendarPage>
+      <TitleDiv>
+        <TitleTypo>내 캘린더</TitleTypo>
+      </TitleDiv>
       {!loading && <TripCalendar diaryInfo={diaryInfo} />}
       <BottomNav></BottomNav>
-    </div>
+    </StCalendarPage>
   );
 };
 export default CalendarPage;
 
-const Title = styled.div`
-  font-size: 3rem;
-  font-weight: 900;
+const StCalendarPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const TitleDiv = styled.div`
+  display: flex;
+  justify-content: baseline;
+  align-items: center;
+  width: 100%;
+  height: 10%;
+  padding-left: 2rem;
+`;
+
+const TitleTypo = styled(Typography)`
   color: ${COLOR.MAIN_GREEN};
-  padding: 3rem 2rem;
+  font-weight: 1000;
+  font-size: 2.5rem;
+  font-family: var(--pretendard-bold);
 `;
diff --git a/src/pages/DiaryListPage.js b/src/pages/DiaryListPage.js
index ed24b71..cca03ec 100644
--- a/src/pages/DiaryListPage.js
+++ b/src/pages/DiaryListPage.js
@@ -156,7 +156,8 @@ const TitleDiv = styled.div`
 const TitleP = styled.p`
   font-size: 2rem;
   padding-left: 1rem;
-  font-weight: bold;
+  font-family: var(--pretendard-medium);
+  font-weight: 800;
 `;
 
 const MainDiv = styled.div`
@@ -187,11 +188,11 @@ const AddFriendBtn = styled(Button)`
   right: 5%;
   left: 70%;
   height: 3.5rem;
-  width: 9rem;
+  width: 10rem;
   background-color: ${COLOR.MAIN_EMER};
   color: white;
-  font-size: 1.1rem;
-  font-weight: 600;
+  font-size: 1.2rem;
+  font-family: var(--pretendard-regular);
   border-radius: 3rem;
   &:hover {
     background-color: ${COLOR.MAIN_EMER};
@@ -227,6 +228,7 @@ const SemititleDiv = styled.div`
 const SemititleP = styled.p`
   font-size: 1.7rem;
   margin-left: 1rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const PencilImg = styled.img`
diff --git a/src/pages/DiaryPage.js b/src/pages/DiaryPage.js
index a1eb949..b3c1841 100644
--- a/src/pages/DiaryPage.js
+++ b/src/pages/DiaryPage.js
@@ -140,6 +140,7 @@ const EditBtn = styled.button`
   border: none;
   background-color: transparent;
   font-size: 1.8rem;
+  font-family: var(--pretendard-regular);
   color: ${COLOR.MAIN_GREEN};
 `;
 
@@ -147,17 +148,20 @@ const DeleteBtn = styled.button`
   border: none;
   background-color: transparent;
   font-size: 1.8rem;
+  font-family: var(--pretendard-regular);
   color: ${COLOR.MAIN_GREEN};
 `;
 
 const Bar = styled.p`
   font-size: 2rem;
+  font-family: var(--pretendard-regular);
   color: ${COLOR.MAIN_GREEN};
 `;
 
 const ContentDiv = styled.div`
   text-align: center;
   font-size: 1.8rem;
+  font-family: var(--pretendard-regular);
   margin-top: 4rem;
 `;
 
@@ -166,10 +170,11 @@ const OkayDiv = styled.div`
 `;
 
 const OkayBtn = styled.button`
-  height: 2.5rem;
+  height: 3rem;
   width: 10rem;
   font-size: 1.7rem;
   font-weight: 600;
+  font-family: var(--pretendard-regular);
   text-align: center;
   vertical-align: center;
   color: white;
diff --git a/src/pages/DiaryWritePage.js b/src/pages/DiaryWritePage.js
index 02d23b9..16c7484 100644
--- a/src/pages/DiaryWritePage.js
+++ b/src/pages/DiaryWritePage.js
@@ -187,10 +187,11 @@ const TitleBox = styled.input`
   background-color: none;
   width: 92%;
   border: none;
-  font-size: 15px;
   border-bottom: solid ${COLOR.MAIN_SKY} 1px;
   margin: auto;
   margin-top: 2rem;
+  font-family: var(--pretendard-medium);
+  font-size: 1.7rem;
   padding-bottom: 1rem;
   &::placeholder {
     color: #bfbfbf;
@@ -203,8 +204,9 @@ const ContentBox = styled.textarea`
   width: 92%;
   height: 37rem;
   border: none;
-  font-size: 15px;
   margin: auto;
+  font-family: var(--pretendard-medium);
+  font-size: 1.7rem;
   margin-top: 1rem;
   &::placeholder {
     color: #bfbfbf;
@@ -237,6 +239,8 @@ const CancelBtn = styled.button`
   width: 14.5rem;
   font-size: 1.8rem;
   font-weight: 600;
+  font-family: var(--pretendard-medium);
+  letter-spacing: 3px;
   background-color: white;
   border: none;
   border-radius: 3rem;
@@ -248,6 +252,8 @@ const SaveBtn = styled.button`
   width: 14.5rem;
   font-size: 1.8rem;
   font-weight: 600;
+  font-family: var(--pretendard-medium);
+  letter-spacing: 3px;
   color: white;
   background-color: #2EABA1;
   border: none;
@@ -257,7 +263,7 @@ const SaveBtn = styled.button`
   background-color: ${(props) => props.disabled ? "rgba(46, 171, 161, 0.3)" : "${COLOR.MAIN_EMER}"}
 `;
 const OkayBtn = styled.button`
-  height: 2.5rem;
+  height: 3rem;
   width: 10rem;
   font-size: 1.7rem;
   font-weight: 600;
@@ -266,6 +272,8 @@ const OkayBtn = styled.button`
   color: white;
   border: none;
   border-radius: 3rem;
+  font-family: var(--pretendard-regular);
+  letter-spacing: 1px;
   &.no {
     color: black;
     background-color: #D9D9D9;
@@ -283,6 +291,7 @@ const ContentDiv = styled.div`
   text-align: center;
   font-size: 1.8rem;
   margin-top: 4rem;
+  font-family: var(--pretendard-regular);
 `;
 
 
diff --git a/src/pages/EditDiaryWritePage.js b/src/pages/EditDiaryWritePage.js
index a945305..e9a548a 100644
--- a/src/pages/EditDiaryWritePage.js
+++ b/src/pages/EditDiaryWritePage.js
@@ -273,6 +273,7 @@ const TitleBox = styled.input`
   width: 92%;
   border: none;
   font-size: 15px;
+  font-family: var(--pretendard-medium);
   border-bottom: solid ${COLOR.MAIN_SKY} 1px;
   margin: auto;
   margin-top: 2rem;
@@ -289,6 +290,7 @@ const ContentBox = styled.textarea`
   height: 37rem;
   border: none;
   font-size: 15px;
+  font-family: var(--pretendard-medium);
   margin: auto;
   margin-top: 1rem;
   &::placeholder {
@@ -322,6 +324,7 @@ const CancelBtn = styled.button`
   width: 14.5rem;
   font-size: 1.8rem;
   font-weight: 600;
+  font-family: var(--pretendard-medium);
   background-color: white;
   border: none;
   border-radius: 3rem;
@@ -333,6 +336,7 @@ const SaveBtn = styled.button`
   width: 14.5rem;
   font-size: 1.8rem;
   font-weight: 600;
+  font-family: var(--pretendard-medium);
   color: white;
   background-color: #2EABA1;
   border: none;
@@ -342,10 +346,11 @@ const SaveBtn = styled.button`
   background-color: ${(props) => props.disabled ? "rgba(46, 171, 161, 0.3)" : "${COLOR.MAIN_EMER}"}
 `;
 const OkayBtn = styled.button`
-  height: 2.5rem;
+  height: 3rem;
   width: 10rem;
   font-size: 1.7rem;
   font-weight: 600;
+  font-family: var(--pretendard-medium);
   text-align: center;
   vertical-align: center;
   color: white;
@@ -367,6 +372,7 @@ const OkayDiv = styled.div`
 const ContentDiv = styled.div`
   text-align: center;
   font-size: 1.8rem;
+  font-family: var(--pretendard-medium);
   margin-top: 4rem;
 `;
 
diff --git a/src/pages/EditProfilPage.js b/src/pages/EditProfilPage.js
index 301782b..3635c03 100644
--- a/src/pages/EditProfilPage.js
+++ b/src/pages/EditProfilPage.js
@@ -122,8 +122,8 @@ const SubmitBtn = styled(Button)`
   border-radius: 2rem;
   font-size: 1.8rem;
   color: white;
-  font-weight: bolder;
   margin-top: 2.2rem;
+  font-family: var(--pretendard-medium);
   &:hover {
     background-color: ${COLOR.MAIN_EMER};
   }
diff --git a/src/pages/InviteFriendPage.js b/src/pages/InviteFriendPage.js
index fa7eaaf..5ceff05 100644
--- a/src/pages/InviteFriendPage.js
+++ b/src/pages/InviteFriendPage.js
@@ -144,7 +144,6 @@ const CopyCodeContainer = styled.div`
 const CopyCodeButton = styled.button`
   border: none;
   background-color: ${COLOR.MAIN_EMER};
-  font-weight: 900;
   width: 40%;
   height: 3.5rem;
   border-radius: 5rem;
@@ -154,6 +153,7 @@ const CopyCodeButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  font-family: var(--pretendard-semibold);
 
   &:active {
     background-color: ${COLOR.MAIN_GREEN};
@@ -167,25 +167,27 @@ const ButtonWrapper = styled.div`
 `;
 const Text = styled.p`
   &.tripName {
-    font-size: 2rem;
+    font-size: 2.3rem;
     font-weight: 900;
     padding: 1rem;
     margin: 1rem 2rem;
+    font-family: var(--pretendard-bold);
   }
 
   &.tripFriend {
-    font-size: 1.5rem;
+    font-size: 1.7rem;
     font-weight: 900;
     padding: 0.7rem 1rem;
     margin: 2rem 2.5rem;
+    font-family: var(--pretendard-medium);
   }
 
   &.explain {
-    font-size: 1rem;
-    font-weight: 800;
+    font-size: 1.2rem;
     color: #747474;
     padding: 0.5rem 1rem;
     margin: 0rem 2.5rem;
+    font-family: var(--pretendard-medium);
   }
 `;
 
diff --git a/src/pages/JoinTripPage.js b/src/pages/JoinTripPage.js
index a75be97..63e2e1a 100644
--- a/src/pages/JoinTripPage.js
+++ b/src/pages/JoinTripPage.js
@@ -191,25 +191,27 @@ const EmptyDiv = styled.div`
 `;
 const Text = styled.p`
   &.tripName {
-    font-size: 2rem;
-    font-weight: 900;
+    font-size: 2.2rem;
     padding: 1rem;
     margin: 1rem 2rem;
+    font-family: var(--pretendard-bold);
   }
 
   &.tripFriend {
-    font-size: 1.5rem;
+    font-size: 1.7rem;
     font-weight: 900;
     padding: 0.7rem 1rem;
     margin: 2rem 2.5rem;
+    font-family: var(--pretendard-medium);
   }
 
   &.explain {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     font-weight: 800;
     color: #747474;
     padding: 0.5rem 1rem;
     margin: 0rem 2.5rem;
+    font-family: var(--pretendard-medium);
   }
 `;
 const InputContainer = styled.div``;
@@ -227,6 +229,7 @@ const SubmitButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  font-family: var(--pretendard-medium);
 
   //버튼 비활성화일때 색상
   ${(props) =>
@@ -258,7 +261,8 @@ const InputCode = styled.input`
   justify-content: center;
   align-items: center;
   margin: 3rem 0rem 0rem 0rem;
-  font-size: 1.5rem;
+  font-size: 1.6rem;
+  font-family: var(--pretendard-medium);
 `;
 const ButtonContainer = styled.div`
   display: flex;
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
index 6ed4026..07ac980 100644
--- a/src/pages/LoginPage.js
+++ b/src/pages/LoginPage.js
@@ -94,6 +94,7 @@ const IntroP = styled.p`
   text-align: left;
   margin-top: 12rem;
   margin-left: -5rem;
+  font-family: var(--pretendard-bold);
 `;
 
 const LogoImage = styled.img`
@@ -119,6 +120,7 @@ const SocialButton = styled.button`
   ${SharedContent}
   align-items: center;
   font-size: 17px;
+  font-family: var(--pretendard-medium);
   height: 50px;
   width: 90%;
   margin: auto;
diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
index 9fc7952..76c8763 100644
--- a/src/pages/MainPage.js
+++ b/src/pages/MainPage.js
@@ -65,7 +65,7 @@ const MainPage = () => {
           <UpDiv>
             <DivNameP>내 여행</DivNameP>
             <AddBtn variant="contained" onClick={handleOpen}>
-              + 여행 추가
+              + &nbsp;여행 추가
             </AddBtn>
           </UpDiv>
           <DownDiv>
@@ -123,14 +123,16 @@ const IntroDiv = styled.div`
 const HiP = styled.p`
   font-size: 2rem;
   color: white;
-  font-family: var(--inter-extrabold);
-  font-weight: 700;
+  font-family: var(--pretendard-bold);
   padding-bottom: 0.5rem;
+  letter-spacing: 1px;
 `;
 
 const WelcomeP = styled.p`
-  font-size: 1.2rem;
+  font-size: 1.3rem;
   color: white;
+  font-family: var(--pretendard-extralight);
+  letter-spacing: 1px;
 `;
 
 const MainDiv = styled.div`
@@ -162,19 +164,19 @@ const UpDiv = styled.div`
 
 const DivNameP = styled.p`
   font-weight: bold;
-  font-size: 1.4rem;
-  font-family: var(--inter-extrabold);
+  font-size: 1.6rem;
+  font-family: var(--pretendard-medium);
   margin-left: 2rem;
 `;
 
 const AddBtn = styled(Button)`
   display: flex;
   background-color: ${COLOR.MAIN_GREEN};
-  width: 7.5rem;
+  font-family: var(--pretendard-extralight);
+  width: 9rem;
   height: 3rem;
   border-radius: 3rem;
-  font-size: 0.9rem;
-  font-weight: bold;
+  font-size: 1.1rem;
   padding-left: 1rem;
   padding-right: 1rem;
   &:hover {
diff --git a/src/pages/MapPage.js b/src/pages/MapPage.js
index 2e3f121..9924945 100644
--- a/src/pages/MapPage.js
+++ b/src/pages/MapPage.js
@@ -35,7 +35,7 @@ const MapPage = () => {
   return (
     <StMapPage>
       <TitleDiv>
-        <TitleTypo variant="h4">나의 여행 지도</TitleTypo>
+        <TitleTypo>나의 여행 지도</TitleTypo>
       </TitleDiv>
       <MapComponent data={data} urls={url} style={{ zIndex: 999 }} />
       <BottomNav style={{ zIndex: 900 }} />
@@ -65,6 +65,8 @@ const TitleDiv = styled.div`
 const TitleTypo = styled(Typography)`
   color: ${COLOR.MAIN_GREEN};
   font-weight: 1000;
+  font-size: 2.5rem;
+  font-family: var(--pretendard-bold);
 `;
 
 export default MapPage;
diff --git a/src/pages/MypagePage.js b/src/pages/MypagePage.js
index 06f2604..c9ba121 100644
--- a/src/pages/MypagePage.js
+++ b/src/pages/MypagePage.js
@@ -37,7 +37,13 @@ const MypagePage = () => {
   };
 
   const goToEdit = () => {
-    navigate("/editprofil", { state: { name: userInfo.name, email: userInfo.email, profileimg: userInfo.profileimg } });
+    navigate("/editprofil", {
+      state: {
+        name: userInfo.name,
+        email: userInfo.email,
+        profileimg: userInfo.profileimg,
+      },
+    });
   };
 
   const goToLogin = () => {
@@ -49,33 +55,40 @@ const MypagePage = () => {
   }, []);
 
   const handleUserInfo = () => {
-    axios.get(`${process.env.REACT_APP_SERVER_URL}/user`, { withCredentials: true})
-    .then((res) => {
-      const data = res.data.userinfo;
-      setUserInfo(
-        { _id: data._id,
+    axios
+      .get(`${process.env.REACT_APP_SERVER_URL}/user`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        const data = res.data.userinfo;
+        setUserInfo({
+          _id: data._id,
           name: data.name,
           email: data.email,
           profileimg: res.data.url,
-          authprovider: data.authprovider});
-    })
-    .catch((error) => {
-      const status = error.status;
-      if (status === 404) {
-        setMessage("사용자를 찾을 수 없습니다.");
-      } else if (status === 401) {
-        setMessage("로그인이 필요합니다.");
-      } else if (status === 500) {
-        setMessage("서버 오류가 발생했습니다.");
-      } else {
-        setMessage("알 수 없는 오류가 발생했습니다.");
-      }
-      console.error("요청 실패:", error);
-    });
+          authprovider: data.authprovider,
+        });
+      })
+      .catch((error) => {
+        const status = error.status;
+        if (status === 404) {
+          setMessage("사용자를 찾을 수 없습니다.");
+        } else if (status === 401) {
+          setMessage("로그인이 필요합니다.");
+        } else if (status === 500) {
+          setMessage("서버 오류가 발생했습니다.");
+        } else {
+          setMessage("알 수 없는 오류가 발생했습니다.");
+        }
+        console.error("요청 실패:", error);
+      });
   };
 
   const handleLogout = () => {
-    axios.delete(`${process.env.REACT_APP_SERVER_URL}/user/logout`, { withCredentials: true})
+    axios
+      .delete(`${process.env.REACT_APP_SERVER_URL}/user/logout`, {
+        withCredentials: true,
+      })
       .then((response) => {
         const status = response.status;
         if (status === 200) {
@@ -95,12 +108,14 @@ const MypagePage = () => {
       });
   };
 
-
-  const DelAccount = () =>{
-    axios.delete(`${process.env.REACT_APP_SERVER_URL}/user`, { withCredentials: true})
+  const DelAccount = () => {
+    axios
+      .delete(`${process.env.REACT_APP_SERVER_URL}/user`, {
+        withCredentials: true,
+      })
       .then((response) => {
         const status = response.status;
-        console.log("res",status);
+        console.log("res", status);
         if (status === 200) {
           setTripName("");
           setTripId("");
@@ -123,7 +138,11 @@ const MypagePage = () => {
   };
   const Menu = [
     { icon: <ModifyIcon />, text: "프로필 편집", action: goToEdit },
-    { icon: <LogoutIcon />, text: "로그아웃", action: [handleLogout, goToLogin] },
+    {
+      icon: <LogoutIcon />,
+      text: "로그아웃",
+      action: [handleLogout, goToLogin],
+    },
     {
       icon: <CancelIcon />,
       text: "계정 탈퇴",
@@ -133,7 +152,7 @@ const MypagePage = () => {
   return (
     <StMyPagePage>
       <TitleDiv>
-        <TitleTypo variant="h4">마이 페이지</TitleTypo>
+        <TitleTypo>마이 페이지</TitleTypo>
       </TitleDiv>
       <ProfilDiv>
         <ProfilAvatar alt="default" src={userInfo.profileimg || Default} />
@@ -146,7 +165,13 @@ const MypagePage = () => {
             return (
               <div key={it.text}>
                 <MenuLstItem disablePadding>
-                  <MenuLIBtn onClick={Array.isArray(it.action) ? () => it.action.forEach((actionFunc) => actionFunc()) : it.action}>
+                  <MenuLIBtn
+                    onClick={
+                      Array.isArray(it.action)
+                        ? () => it.action.forEach((actionFunc) => actionFunc())
+                        : it.action
+                    }
+                  >
                     {it.icon}
                     <MenuP>{it.text}</MenuP>
                   </MenuLIBtn>
@@ -158,12 +183,14 @@ const MypagePage = () => {
       </MenuDiv>
       {isModalOpen && (
         <CancelModal
-          content={<CancelContent/>}
+          content={<CancelContent />}
           closeModals={closeModal}
-          buttons={<StCancelButtons>
-            <NoBtn onClick={closeModal}>아니오</NoBtn>
-            <YesBtn onClick={DelAccount}>네</YesBtn>
-          </StCancelButtons>}
+          buttons={
+            <StCancelButtons>
+              <NoBtn onClick={closeModal}>아니오</NoBtn>
+              <YesBtn onClick={DelAccount}>네</YesBtn>
+            </StCancelButtons>
+          }
           w="80%"
           h="20%"
         />
@@ -193,6 +220,8 @@ const TitleDiv = styled.div`
 const TitleTypo = styled(Typography)`
   color: ${COLOR.MAIN_GREEN};
   font-weight: 1000;
+  font-size: 2.5rem;
+  font-family: var(--pretendard-bold);
 `;
 
 const ProfilDiv = styled.div`
@@ -214,6 +243,7 @@ const NameP = styled.p`
   font-size: 2.5rem;
   font-weight: 600;
   margin-top: 1.5rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const MailP = styled.p`
@@ -221,6 +251,7 @@ const MailP = styled.p`
   color: #868686;
   font-weight: 400;
   margin-top: 1.2rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const MenuDiv = styled.div`
@@ -246,6 +277,7 @@ const MenuLIBtn = styled(ListItemButton)`
 const MenuP = styled.p`
   font-size: 1.6rem;
   margin-left: 1.8rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const SharedAttr = `
@@ -267,8 +299,7 @@ const LogoutIcon = styled(LogoutOutlinedIcon)`
   ${SharedAttr};
 `;
 
-const CancelModal = styled(Modal)`
-`;
+const CancelModal = styled(Modal)``;
 
 const StCancelButtons = styled.div`
   display: flex;
@@ -286,10 +317,11 @@ const YesBtn = styled.button`
   font-size: 1.3rem;
   color: white;
   font-weight: bolder;
+  font-family: var(--pretendard-medium);
 `;
 
 const NoBtn = styled.button`
-  background-color: #D9D9D9;
+  background-color: #d9d9d9;
   width: 40%;
   height: 3rem;
   border: none;
@@ -297,5 +329,6 @@ const NoBtn = styled.button`
   font-size: 1.3rem;
   color: black;
   font-weight: bolder;
+  font-family: var(--pretendard-medium);
 `;
 export default MypagePage;
diff --git a/src/pages/TagPage.js b/src/pages/TagPage.js
index 15a248a..d86f6e1 100644
--- a/src/pages/TagPage.js
+++ b/src/pages/TagPage.js
@@ -114,6 +114,7 @@ const Tagbox = styled.div`
 
 const TagP = styled.p`
   font-size: 1.5rem;
+  font-family: var(--pretendard-medium);
 `;
 
 const ModalContent = styled(Box)`
diff --git a/src/styles/globalStyle.js b/src/styles/globalStyle.js
index b43c345..861045e 100644
--- a/src/styles/globalStyle.js
+++ b/src/styles/globalStyle.js
@@ -2,6 +2,14 @@ import { createGlobalStyle } from "styled-components";
 import { reset } from "styled-reset";
 
 const GlobalStyle = createGlobalStyle`
+
+  @font-face {
+    font-family: "Pretendard";
+    src: url("../assets/fonts/Pretendard-Medium.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+  }
+
   ${reset}
 
   #root,