diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8096cde..b241081 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "license": "ISC",
       "dependencies": {
+        "@fontsource-variable/noto-sans-jp": "^5.2.9",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-switch": "^1.2.5",
         "@radix-ui/react-toast": "^1.2.14",
@@ -947,6 +948,15 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fontsource-variable/noto-sans-jp": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans-jp/-/noto-sans-jp-5.2.9.tgz",
+      "integrity": "sha512-osPL5f7dvGDjuMuFwDTGPLG37030D8X5zk+3BWea6txAVDFeE/ZIrKW0DY0uSDfRn9+NiKbiFn/2QvZveKXTog==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9077da9..747f7ed 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/noto-sans-jp": "^5.2.9",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-toast": "^1.2.14",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 96489cd..6cfa0bc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,5 @@
+@import "@fontsource-variable/noto-sans-jp";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,7 +9,6 @@
   body
   {
     @apply overflow-x-clip;
-    @apply font-jpSans;
   }
 
   a
@@ -22,7 +23,7 @@
 
 :root
 {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Noto Sans JP Variable", system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index dd99906..fddc378 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -23,20 +23,5 @@ export default {
 	    keyframes: {
 		'rainbow-scroll': {
 		    '0%':   { backgroundPosition: '0% 50%' },
-		    '100%': { backgroundPosition: '200% 50%' } } },
-	    fontFamily: {
-		jpSans: ['Noto Sans JP',
-			 'Hiragino Kaku Gothic ProN',
-			 'ヒラギノ角ゴ ProN W3',
-			 'Yu Gothic',
-			 '游ゴシック体',
-			 'Meiryo',
-			 'sans-serif'],
-		jpSerif: ['Noto Serif JP',
-			  'Hiragino Mincho ProN',
-			  'ヒラギノ明朝 ProN W3',
-			  'Yu Mincho',
-			  '游明朝',
-			  'MS PMincho',
-			  'serif'] } } },
+		    '100%': { backgroundPosition: '200% 50%' } } } } },
     plugins: [] } satisfies Config