refactor: 폰트 적용 방식 변경(public)

g-magazine-hackaton · Dec 6, 2023 · 9d92fcc · 9d92fcc
1 parent 9f26a08
commit 9d92fcc
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -11,11 +11,6 @@
       crossorigin="anonymous"
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
     />
-    <link
-      rel="preload"
-      as="style"
-      href="//script.gmarket.co.kr/gds/gds.css?v=20211002"
-    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/GmarketSansBold.woff2 b/public/GmarketSansBold.woff2
diff --git a/public/GmarketSansMedium.woff2 b/public/GmarketSansMedium.woff2
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -116,7 +116,6 @@ const Navbar = () => {
     '/profile',
     '/write',
     '/rank',
-    '/seller',
     '/subscribe',
     '/magazine/',
   ].find((path) => pathname.includes(path));

diff --git a/src/components/ui/your-page/profile.tsx b/src/components/ui/your-page/profile.tsx
@@ -21,7 +21,7 @@ const HeaderWrapper = styled.div`
   justify-content: space-between;
   background-image: linear-gradient(170deg, #497cff 26%, #002041 79%);
   color: white;
-  padding: 16px 18px;
+  padding: 64px 18px 16px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   font-family: Gmarket Sans;
 `;

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -1,6 +1,27 @@
 import { css } from '@emotion/react';
 
+const fontFace = `
+  @font-face {
+    font-family: 'Gmarket Sans';
+    font-weight: 500;
+    font-style: normal;
+    src: local('GmarketSansMedium'),
+      url(/g-magazine-fe/public/GmarketSansMedium.woff2) format('woff2');
+    font-display: swap;
+  } 
+  @font-face {
+    font-family: 'Gmarket Sans';
+    font-weight: 700;
+    font-style: normal;
+    src: local('GmarketSansBold'),
+      url(/g-magazine-fe/public/GmarketSansBold.woff2) format('woff2');
+    font-display: swap;
+  }
+`;
+
 const globalStyle = css`
+  ${fontFace}
+
   body {
     color: #111;
     font-size: 14px;