diff --git a/public/font/DS-DIGI.TTF b/public/font/DS-DIGI.TTF
new file mode 100644
index 00000000..09258773
Binary files /dev/null and b/public/font/DS-DIGI.TTF differ
diff --git a/public/font/HyundaiSansTextOffice-Medium.ttf b/public/font/HyundaiSansTextOffice-Medium.ttf
new file mode 100644
index 00000000..e7af0429
Binary files /dev/null and b/public/font/HyundaiSansTextOffice-Medium.ttf differ
diff --git a/public/font/HyundaiSansTextOffice-Medium.woff b/public/font/HyundaiSansTextOffice-Medium.woff
new file mode 100644
index 00000000..52bd3c4d
Binary files /dev/null and b/public/font/HyundaiSansTextOffice-Medium.woff differ
diff --git a/src/App.jsx b/src/App.jsx
index 42dc932e..c8102815 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,11 @@
 function App() {
   return (
-    <div>
-      <span>Hello Orange</span>
+    <div className="text-5xl">
+      <div className="flex flex-col">
+        <span>다람쥐 헌 쳇바퀴에 타고파</span>
+        <span>Hyundai Sans Text Office</span>
+        <span className="font-ds-digital">0123456789</span>
+      </div>
     </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index b5c61c95..937b9597 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "ds-digital";
+  src: url("/font/DS-DIGI.TTF") format("truetype");
+}
+
+@font-face {
+  font-family: "hdsans";
+  src: url("/font/HyundaiSansTextOffice-Medium.woff") format("woff"), url("/font/HyundaiSansTextOffice-Medium.ttf") format("truetype")
+}
+
+@layer base {
+  body {
+    font-family: "hdsans";
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d37737fc..88d4352e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
+    fontFamily: {
+      "ds-digital": ["ds-digital"],
+      "hdsans": ["hdsans"],
+    },
   },
   plugins: [],
-}
-
+};
diff --git a/vite.config.js b/vite.config.js
index 5a33944a..b672c917 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "./",
   plugins: [react()],
-})
+  resolve: {
+    alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
+  },
+});