[Design] : 기본 폰트 수정했습니다

LikeLion-at-DGU · Oct 3, 2024 · bf903ec · bf903ec
1 parent d312bd3
commit bf903ec
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 11 deletions.
diff --git a/src/assets/fonts/NanumSquareRoundB.ttf b/src/assets/fonts/NanumSquareRoundB.ttf
diff --git a/src/assets/fonts/NanumSquareRoundEB.ttf b/src/assets/fonts/NanumSquareRoundEB.ttf
diff --git a/src/assets/fonts/NanumSquareRoundL.ttf b/src/assets/fonts/NanumSquareRoundL.ttf
diff --git a/src/assets/fonts/NanumSquareRoundR.ttf b/src/assets/fonts/NanumSquareRoundR.ttf
diff --git a/src/components/about/AboutCard/styled.js b/src/components/about/AboutCard/styled.js
@@ -30,14 +30,14 @@ export const Name = styled.div`
   justify-content: center;
   padding-top:5px;
   color: var(--, #000);
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoR00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundB['font-family']};
   font-size: 14px;
 `
 export const Department = styled.div`
   display:flex;
   justify-content: center;
   color: var(--, #000);
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoUL00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundR['font-family']};
   font-size: 10px;
 `
 
@@ -96,7 +96,7 @@ export const Role = styled.div`
   position: relative; 
   display: flex;
   justify-content: center;
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoUL00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundR['font-family']};
   font-size: 10px;
   color: ${({ role }) => {
     switch (role) {
@@ -133,7 +133,7 @@ export const Intro = styled.div`
   flex-direction:row;
   align-items:flex-end;
   gap:5px;
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoM00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundB['font-family']};
 `;
 
 export const IntroLine = styled.div`

diff --git a/src/components/about/LikeLionLink/styled.js b/src/components/about/LikeLionLink/styled.js
@@ -15,20 +15,20 @@ export const Photo = styled.img`
 export const MainMent = styled.div`
   color: #000;
   text-align: center;
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoB00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundB['font-family']};
   font-size: 16px;
 `;
 
 export const SubMent = styled.div`
   color: #000;
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoL00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundR['font-family']};
   text-align: center;
   font-size: 16px;
 `;
 
 export const LinkMent = styled.div`
   color: #EB8F00;
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoM00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundB['font-family']};
   font-size: 10px;
 `;
 
@@ -65,7 +65,7 @@ export const Link = styled.div`
   right: -15px;
   top: 22px;
   color: #EB8F00;
-  font-family: ${({ theme }) => theme.fonts.AppleSDGothicNeoM00['font-family']};
+  font-family: ${({ theme }) => theme.fonts.NanumSquareRoundB['font-family']};
   font-size: 16px;
 
   &:hover ${LinkImg} {

diff --git a/src/styles/global.js b/src/styles/global.js
@@ -3,7 +3,7 @@ import { createGlobalStyle } from "styled-components";
 const GlobalStyle = createGlobalStyle`
 *{box-sizing:border-box}
 body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul {margin:0;padding:0}
-body, button, input, select, table, textarea {font-size:12px;line-height:16px;color:#202020;font-family: "AppleSDGothicNeoL00", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, sans-serif}
+body, button, input, select, table, textarea {font-size:12px;line-height:16px;color:#202020;font-family: "NanumSquareRoundR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, sans-serif}
 h1, h2, h3, h4, h5, h6 {font-size:inherit;line-height:inherit}
 textarea {-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:transparent;border:0;word-break:keep-all;word-wrap:break-word}
 button, input {-webkit-border-radius:0;border-radius:0;border:0}
@@ -59,6 +59,26 @@ i {font-style:normal}
 }
 
 
+//나눔 스퀘어 라운드 폰트 설정
+@font-face {
+    font-family: "NanumSquareRoundB";
+    src: url("src/assets/fonts/NanumSquareRoundB.ttf") format("truetype");
+}
+@font-face {
+    font-family: "NanumSquareRoundEB";
+    src: url("src/assets/fonts/NanumSquareRoundEB.ttf") format("truetype");
+}
+@font-face {
+    font-family: "NanumSquareRoundR";
+    src: url("src/assets/fonts/NanumSquareRoundR.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "NanumSquareRoundL";
+    src: url("src/assets/fonts/NanumSquareRoundL.ttf") format("truetype");
+}
+
+
 // 초기 html 설정
 html {
 	/* background-color: ${({ theme }) => theme.colors.fall};	 */
@@ -81,7 +101,7 @@ body {
 	overflow-x: hidden;
 	background-color: ${({ theme }) => theme.colors.white};
 	color: ${({ theme }) => theme.colors.default};
-	font-family: "AppleSDGothicNeoL00", "AppleSDGothicNeoH00", "AppleSDGothicNeoB00", "AppleSDGothicNeoUL00", "AppleSDGothicNeoT0C", sans-serif;
+	font-family: "NanumSquareRoundB", "NanumSquareRoundEB","NanumSquareRoundR", "NanumSquareRoundL", sans-serif;
 }
 
 `;

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -46,7 +46,7 @@ export const theme = {
 
   fonts: {
     default: fontGenerator(
-      "AppleSDGothicNeoL00",
+      "NanumSquareRoundR",
       "1rem",
       "400",
       "1.5",
@@ -61,5 +61,10 @@ export const theme = {
     AppleSDGothicNeoT0C: fontGenerator("AppleSDGothicNeoT0C"),
     AppleSDGothicNeoR00: fontGenerator("AppleSDGothicNeoR00"),
     AppleSDGothicNeoM00: fontGenerator("AppleSDGothicNeoM00"),
+
+    NanumSquareRoundB: fontGenerator("NanumSquareRoundB"),
+    NanumSquareRoundEB: fontGenerator("NanumSquareRoundEB"),
+    NanumSquareRoundR: fontGenerator("NanumSquareRoundR"),
+    NanumSquareRoundL: fontGenerator("NanumSquareRoundL"),
   },
 };