fix: nanum pen font display to block

SoYoung210 · Oct 30, 2024 · 8326113 · 8326113
1 parent b13b468
commit 8326113
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/src/pages/particle-effect.tsx b/src/pages/particle-effect.tsx
@@ -207,14 +207,7 @@ export default function ParticleEffectPage() {
 const HelperArrow = forwardRef<HTMLDivElement>((props, ref) => {
   return (
     <HelperTextRoot ref={ref}>
-      <div
-        style={{
-          fontFamily: '"Nanum Pen Script"',
-          paddingBottom: 4,
-        }}
-      >
-        Click the trash can icon!
-      </div>
+      <NanumPenScript>Click the trash can icon!</NanumPenScript>
       <div
         style={{
           transform: 'rotate(320deg)',
@@ -229,25 +222,19 @@ const HelperArrow = forwardRef<HTMLDivElement>((props, ref) => {
   );
 });
 
+const NanumPenScript = styled('div', {
+  fontFamily: '$nanumBlock',
+  paddingBottom: 4,
+});
 const StyledText = styled('div', {
   color: '$gray6',
   fontSize: 24,
   fontWeight: 500,
 });
 
-const fadeIn = keyframes({
-  from: {
-    opacity: 0,
-  },
-  to: {
-    opacity: 1,
-  },
-});
-
 const HelperTextRoot = styled('div', {
   position: 'absolute',
   transform: 'rotate(10deg)',
-  animation: `0.8s ease ${fadeIn} `,
   color: '$gray10',
   minWidth: 180,
   display: 'flex',

diff --git a/src/styles/global.ts b/src/styles/global.ts
@@ -28,4 +28,9 @@ export const globalStyles = globalCss({
     border: 0,
     padding: 0,
   },
+
+  '@font-face': {
+    fontFamily: 'Nanum Pen Script',
+    fontDisplay: 'block',
+  },
 });
diff --git a/stitches.config.ts b/stitches.config.ts
@@ -74,7 +74,11 @@ export const {
       large: '0 30px 60px rgba(0,0,0,0.12)',
     },
     colors,
+    fonts: {
+      nanumBlock: '"Nanum Pen Script"',
+    },
   },
+
   utils: {
     size: (value: string | number) => ({
       width: value,