diff --git a/public/css/editor.css b/public/css/editor.css
index 5bbff0c..9a0abc5 100644
--- a/public/css/editor.css
+++ b/public/css/editor.css
@@ -1,5 +1,5 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css");
-@import url("https://fonts.googleapis.com/css?family=Heebo:400,500,600&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap");
 @import url("metropolis.css");
 
 body {
@@ -12,7 +12,9 @@ body {
   margin: 0;
   padding: 0;
   text-align: center;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.3px;
   overflow-x: hidden;
   overflow-y: hidden;
@@ -139,7 +141,9 @@ body {
 }
 
 .metropolis {
-  font-family: "Metropolis", "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Metropolis", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
 }
 
 #topCenterBar {
@@ -642,7 +646,9 @@ body {
 }
 
 kbd {
-  font-family: "Metropolis", "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Metropolis", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   font-style: italic;
   border: 1.5px solid #555;
   padding: 2px 10px 2px 6px;
@@ -715,7 +721,9 @@ kbd {
 }
 
 .optionValue {
-  font-family: "Metropolis", "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   font-weight: 400;
   color: #404040;
   font-size: 2vh;
diff --git a/public/css/error.css b/public/css/error.css
index f47b099..355fc4f 100644
--- a/public/css/error.css
+++ b/public/css/error.css
@@ -1,4 +1,4 @@
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp.css");
 
 body {
   width: 100vw;
@@ -6,7 +6,9 @@ body {
   margin: 0;
   padding: 0;
   background-color: #eee;
-  font-family: "Metropolis", "Pretendard Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.5px;
   display: flex;
   flex-direction: column;
diff --git a/public/css/game.css b/public/css/game.css
index 733178c..2f55f4f 100644
--- a/public/css/game.css
+++ b/public/css/game.css
@@ -1,4 +1,5 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp.css");
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap");
 @import url("metropolis.css");
 
 @-moz-document url-prefix() {
@@ -16,14 +17,18 @@ body {
   margin: 0;
   padding: 0;
   text-align: center;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.3px;
   overflow-x: hidden;
   overflow-y: hidden;
 }
 
 .metropolis {
-  font-family: "Metropolis", "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Metropolis", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
 }
 
 .lighter {
@@ -894,7 +899,9 @@ p {
 
 .optionValue {
   margin-top: 0.5vh;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   font-weight: 400;
   color: #404040;
   font-size: 2vh;
@@ -907,7 +914,9 @@ p {
   width: 10vw;
   height: 5vh;
   font-size: 2vh;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.5px;
   color: #fff;
   background-color: #666;
@@ -952,7 +961,9 @@ p {
   text-align: center;
   padding: 1.2vh 3vw 1.2vh 3vw;
   font-size: 2vh;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.5px;
   color: #fff;
   text-decoration: none;
@@ -1658,7 +1669,9 @@ input[type="number"] {
 
 .timingText {
   margin-top: 1vh;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   font-size: 2vh;
   font-weight: 400;
 }
diff --git a/public/css/index.css b/public/css/index.css
index 0e8bb46..e981499 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,10 +1,13 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css");
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap");
 
 body {
   margin: 0;
   padding: 0;
   text-align: center;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.3px;
   overflow: hidden;
   user-select: none;
diff --git a/public/css/info.css b/public/css/info.css
index b009987..c3a5e3a 100644
--- a/public/css/info.css
+++ b/public/css/info.css
@@ -7,7 +7,9 @@ body {
   align-items: flex-start;
   justify-content: flex-start;
   letter-spacing: -0.3px;
-  font-family: "Montserrat", "Pretendard JP Variable", system-ui, -apple-system, arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   background-color: white;
   margin: 3vh 3vw;
   padding: 0;
diff --git a/public/css/join.css b/public/css/join.css
index 9dbf7f7..70e31c7 100644
--- a/public/css/join.css
+++ b/public/css/join.css
@@ -1,4 +1,5 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css");
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap");
 
 body {
   width: 100vw;
@@ -6,7 +7,9 @@ body {
   margin: 0;
   padding: 0;
   background-color: #eee;
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.3px;
   display: flex;
   flex-direction: column;
@@ -15,7 +18,9 @@ body {
 }
 
 input {
-  font-family: "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
 }
 
 form {
diff --git a/public/css/play.css b/public/css/play.css
index fd98f36..f240c13 100644
--- a/public/css/play.css
+++ b/public/css/play.css
@@ -1,5 +1,4 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css");
-@import url("https://fonts.googleapis.com/css?family=Heebo:400,500,600&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,800&display=swap");
 
 body {
@@ -11,7 +10,9 @@ body {
   margin: 0;
   padding: 0;
   text-align: center;
-  font-family: "Montserrat", "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   letter-spacing: -0.3px;
   overflow-x: hidden;
   overflow-y: hidden;
@@ -759,7 +760,9 @@ body {
 }
 
 .optionValue {
-  font-family: "Montserrat", "Pretendard JP Variable", "나눔바른고딕", arial;
+  font-family: "Montserrat", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans",
+    "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-feature-settings: "ss05";
   font-weight: 400;
   color: #404040;
   font-size: 2vh;
diff --git a/public/js/editor.js b/public/js/editor.js
index ba66113..3e8b760 100644
--- a/public/js/editor.js
+++ b/public/js/editor.js
@@ -385,7 +385,7 @@ const drawNote = (p, x, y, s, n, d, t, f) => {
   if (s == true) {
     cntCtx.lineWidth = Math.round(cntCanvas.width / 300);
     cntCtx.beginPath();
-    cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
+    cntCtx.font = `500 ${window.innerHeight / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     cntCtx.fillStyle = "#000";
     cntCtx.strokeStyle = "#fff";
     cntCtx.textAlign = "center";
@@ -532,7 +532,7 @@ const drawBullet = (x, y, a, s, l, d) => {
   let w = cntCanvas.width / 80;
   if (s == true) {
     cntCtx.beginPath();
-    cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
+    cntCtx.font = `500 ${window.innerHeight / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     cntCtx.fillStyle = "#000";
     cntCtx.strokeStyle = "#fff";
     cntCtx.textAlign = d == "L" ? "left" : "right";
@@ -682,7 +682,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
           }
           break;
         default:
-          cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
+          cntCtx.font = `500 ${window.innerHeight / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           cntCtx.fillStyle = "#F55";
           cntCtx.textAlign = "left";
           cntCtx.textBaseline = "top";
@@ -838,7 +838,7 @@ const tmlRender = () => {
     tmlCtx.fillStyle = "#111";
     tmlCtx.textAlign = "left";
     tmlCtx.textBaseline = "middle";
-    tmlCtx.font = `${tmlCanvas.height / 14}px Metropolis, Pretendard JP Variable`;
+    tmlCtx.font = `${tmlCanvas.height / 14}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     tmlCtx.fillText("Note", startX * 1.2 + height / 6, startY + timelineYLoc + height / 1.8);
     let i = 1;
     for (i; i <= bulletsOverlapNum; i++) {
@@ -863,7 +863,7 @@ const tmlRender = () => {
     tmlCtx.fillStyle = "#FFF";
     tmlCtx.fillRect(0, endY, endX, tmlCanvas.height - endY);
     tmlCtx.fillRect(0, 0, endX, startY);
-    tmlCtx.font = `${tmlCanvas.height / 16}px Metropolis, Pretendard JP Variable`;
+    tmlCtx.font = `${tmlCanvas.height / 16}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     tmlCtx.textAlign = "center";
     tmlCtx.textBaseline = "bottom";
     tmlCtx.fillStyle = "#777";
@@ -966,7 +966,7 @@ const tmlRender = () => {
     }
 
     //Sync alert text
-    tmlCtx.font = `500 ${tmlCanvas.height / 15}px Metropolis, Pretendard JP Variable`;
+    tmlCtx.font = `500 ${tmlCanvas.height / 15}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     tmlCtx.fillStyle = "#555";
     tmlCtx.textAlign = "right";
     tmlCtx.textBaseline = "top";
@@ -1007,7 +1007,7 @@ const tmlRender = () => {
       timelineContainer.style.cursor = "url('/images/parts/cursor/blueSelect.cur'), pointer";
     }
   } catch (e) {
-    tmlCtx.font = `500 ${tmlCanvas.height / 15}px Metropolis, Pretendard JP Variable`;
+    tmlCtx.font = `500 ${tmlCanvas.height / 15}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     tmlCtx.fillStyle = "#F55";
     tmlCtx.textAlign = "left";
     tmlCtx.textBaseline = "top";
@@ -1176,9 +1176,9 @@ const cntRender = () => {
           cntCtx.beginPath();
           if (denySkin) cntCtx.fillStyle = "#111";
           else cntCtx.fillStyle = "#fff";
-          cntCtx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Metropolis, Pretendard JP Variable`;
+          cntCtx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           if (renderTriggers[i].size.indexOf("vh") != -1)
-            cntCtx.font = `${renderTriggers[i].weight} ${(cntCanvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Metropolis, Pretendard JP Variable`;
+            cntCtx.font = `${renderTriggers[i].weight} ${(cntCanvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           cntCtx.textAlign = renderTriggers[i].align;
           cntCtx.textBaseline = renderTriggers[i].valign;
           cntCtx.fillText(renderTriggers[i].text, tw * (renderTriggers[i].x + 100), th * (renderTriggers[i].y + 100));
@@ -1317,7 +1317,7 @@ const cntRender = () => {
       cntCtx.moveTo(cntCanvas.width / 2 - 15, cntCanvas.height / 2 - 15);
       cntCtx.lineTo(cntCanvas.width / 2 + 15, cntCanvas.height / 2 - 15);
       cntCtx.stroke();
-      cntCtx.font = `500 ${cntCanvas.height / 25}px Metropolis, Pretendard JP Variable`;
+      cntCtx.font = `500 ${cntCanvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       cntCtx.textAlign = "center";
       cntCtx.textBaseline = "top";
       cntCtx.fillText("Click to add Trigger", cntCanvas.width / 2, cntCanvas.height / 2 + 10);
@@ -1331,7 +1331,7 @@ const cntRender = () => {
     }
   } catch (e) {
     if (e) {
-      cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
+      cntCtx.font = `500 ${window.innerHeight / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       cntCtx.fillStyle = "#F55";
       cntCtx.textAlign = "left";
       cntCtx.textBaseline = "top";
diff --git a/public/js/index.js b/public/js/index.js
index a99034e..9f8596c 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,4 +1,4 @@
-const animContainer = document.getElementById("animContainer");
+// const animContainer = document.getElementById("animContainer");
 const safariBlocker = document.getElementById("safariBlocker");
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
@@ -10,15 +10,15 @@ document.addEventListener("DOMContentLoaded", () => {
     document.location.href = document.location.href.replace("http:", "https:");
     return;
   }
-  let widthWidth = window.innerWidth;
-  let heightWidth = (window.innerHeight / 9) * 16;
-  if (widthWidth > heightWidth) {
-    animContainer.style.width = `${widthWidth}px`;
-    animContainer.style.height = `${(widthWidth / 16) * 9}px`;
-  } else {
-    animContainer.style.width = `${heightWidth}px`;
-    animContainer.style.height = `${(heightWidth / 16) * 9}px`;
-  }
+  // let widthWidth = window.innerWidth;
+  // let heightWidth = (window.innerHeight / 9) * 16;
+  // if (widthWidth > heightWidth) {
+  //   animContainer.style.width = `${widthWidth}px`;
+  //   animContainer.style.height = `${(widthWidth / 16) * 9}px`;
+  // } else {
+  //   animContainer.style.width = `${heightWidth}px`;
+  //   animContainer.style.height = `${(heightWidth / 16) * 9}px`;
+  // }
   fetch(`${api}/auth/status`, {
     method: "GET",
     credentials: "include",
diff --git a/public/js/play.js b/public/js/play.js
index 61688d0..c2698bb 100644
--- a/public/js/play.js
+++ b/public/js/play.js
@@ -411,7 +411,7 @@ const drawParticle = (n, x, y, j, d) => {
         let p = easeOutQuad((Date.now() - s) / 700);
         let newY = y - (canvas.height / 20) * p;
         ctx.fillStyle = getJudgeStyle(j.toLowerCase(), p, cx, newY);
-        ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+        ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
         ctx.fillText(j, cx, newY);
@@ -430,7 +430,7 @@ const drawParticle = (n, x, y, j, d) => {
       let p = easeOutQuad((Date.now() - missParticles[j].s) / 700);
       let newY = cy - (canvas.height / 20) * p;
       ctx.fillStyle = getJudgeStyle("miss", p);
-      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("Miss", cx, newY);
@@ -442,7 +442,7 @@ const drawParticle = (n, x, y, j, d) => {
       let p = easeOutQuad((Date.now() - perfectParticles[j].s) / 700);
       let newY = cy - (canvas.height / 20) * p;
       ctx.fillStyle = getJudgeStyle("perfect", p, cx, newY);
-      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("Perfect", cx, newY);
@@ -820,7 +820,7 @@ const drawKeyInput = () => {
     ctx.stroke();
     ctx.beginPath();
     ctx.fillStyle = "#fff";
-    ctx.font = `600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
+    ctx.font = `600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     ctx.textBaseline = "top";
     ctx.textAlign = "center";
     ctx.fillText(
@@ -864,7 +864,7 @@ const cntRender = () => {
       }
       fontSize = (canvas.height / 5) * easeOutSine((Date.now() - comboAlertMs) / 1000);
       ctx.beginPath();
-      ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.fillStyle = `rgba(200,200,200,${comboOpacity})`;
       ctx.textBaseline = "middle";
       ctx.textAlign = "center";
@@ -904,9 +904,9 @@ const cntRender = () => {
         if (renderTriggers[i].beat <= beats && beats <= renderTriggers[i].beat + renderTriggers[i].duration) {
           ctx.beginPath();
           ctx.fillStyle = "#fff";
-          ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable`;
+          ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           if (renderTriggers[i].size.indexOf("vh") != -1)
-            ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable`;
+            ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           ctx.textAlign = renderTriggers[i].align;
           ctx.textBaseline = renderTriggers[i].valign;
           ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
@@ -1020,7 +1020,7 @@ const cntRender = () => {
     }
   } catch (e) {
     if (e) {
-      ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.fillStyle = "#F55";
       ctx.textAlign = "left";
       ctx.textBaseline = "top";
@@ -1047,13 +1047,13 @@ const cntRender = () => {
     displayScore = score;
   }
   ctx.beginPath();
-  ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+  ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
   ctx.fillStyle = "#fff";
   ctx.textAlign = "right";
   ctx.textBaseline = "top";
   ctx.fillText(numberWithCommas(`${Math.round(displayScore)}`.padStart(9, 0)), canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05);
   const comboAnimation = Math.max(0, 1 - easeOutQuart(Math.min(Date.now() - comboAnimationMs, 500) / 500));
-  ctx.font = `${400 * (1 + comboAnimation * 0.5)} ${(canvas.height / 40) * (1 + comboAnimation)}px Montserrat, Pretendard JP Variable`;
+  ctx.font = `${400 * (1 + comboAnimation * 0.5)} ${(canvas.height / 40) * (1 + comboAnimation)}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
   ctx.fillStyle = "#fff";
   ctx.fillText(`${combo}x`, canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05 + canvas.height / 25);
   drawCursor();
@@ -1076,7 +1076,7 @@ const cntRender = () => {
     ctx.fill();
     ctx.beginPath();
     ctx.fillStyle = "#000000";
-    ctx.font = `italic 600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
+    ctx.font = `italic 600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     ctx.textAlign = "left";
     ctx.textBaseline = "middle";
     ctx.fillText("NEW RECORD!", canvas.width * 0.87, canvas.height * 0.23);
@@ -1274,7 +1274,7 @@ const calculateResult = () => {
   }
   if (missPoint.length == 0) {
     missCtx.fillStyle = "#FFF";
-    missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+    missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     missCtx.textAlign = "right";
     missCtx.textBaseline = "bottom";
     missCtx.fillText("Perfect!", missCanvas.width - 10, missCanvas.height * 0.8 - 10);
@@ -1343,7 +1343,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
         }
         break;
       default:
-        ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+        ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
         ctx.fillStyle = "#F55";
         ctx.textAlign = "left";
         ctx.textBaseline = "top";
diff --git a/public/js/test.js b/public/js/test.js
index 323f233..3e1dfb6 100644
--- a/public/js/test.js
+++ b/public/js/test.js
@@ -387,7 +387,7 @@ const drawParticle = (n, x, y, j, d) => {
         let p = easeOutQuad((Date.now() - s) / 700);
         let newY = y - (canvas.height / 20) * p;
         ctx.fillStyle = getJudgeStyle(j.toLowerCase(), p, cx, newY);
-        ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+        ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
         ctx.fillText(j, cx, newY);
@@ -406,7 +406,7 @@ const drawParticle = (n, x, y, j, d) => {
       let p = easeOutQuad((Date.now() - missParticles[j].s) / 700);
       let newY = cy - (canvas.height / 20) * p;
       ctx.fillStyle = getJudgeStyle("miss", p);
-      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("Miss", cx, newY);
@@ -418,7 +418,7 @@ const drawParticle = (n, x, y, j, d) => {
       let p = easeOutQuad((Date.now() - perfectParticles[j].s) / 700);
       let newY = cy - (canvas.height / 20) * p;
       ctx.fillStyle = getJudgeStyle("perfect", p, cx, newY);
-      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("Perfect", cx, newY);
@@ -796,7 +796,7 @@ const drawKeyInput = () => {
     ctx.stroke();
     ctx.beginPath();
     ctx.fillStyle = "#fff";
-    ctx.font = `600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
+    ctx.font = `600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     ctx.textBaseline = "top";
     ctx.textAlign = "center";
     ctx.fillText(
@@ -840,7 +840,7 @@ const cntRender = () => {
       }
       fontSize = (canvas.height / 5) * easeOutSine((Date.now() - comboAlertMs) / 1000);
       ctx.beginPath();
-      ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.fillStyle = `rgba(200,200,200,${comboOpacity})`;
       ctx.textBaseline = "middle";
       ctx.textAlign = "center";
@@ -880,9 +880,9 @@ const cntRender = () => {
         if (renderTriggers[i].beat <= beats && beats <= renderTriggers[i].beat + renderTriggers[i].duration) {
           ctx.beginPath();
           ctx.fillStyle = "#fff";
-          ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable`;
+          ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           if (renderTriggers[i].size.indexOf("vh") != -1)
-            ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable`;
+            ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           ctx.textAlign = renderTriggers[i].align;
           ctx.textBaseline = renderTriggers[i].valign;
           ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
@@ -994,7 +994,7 @@ const cntRender = () => {
     }
   } catch (e) {
     if (e) {
-      ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.fillStyle = "#F55";
       ctx.textAlign = "left";
       ctx.textBaseline = "top";
@@ -1019,13 +1019,13 @@ const cntRender = () => {
     displayScore = score;
   }
   ctx.beginPath();
-  ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+  ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
   ctx.fillStyle = "#fff";
   ctx.textAlign = "right";
   ctx.textBaseline = "top";
   ctx.fillText(numberWithCommas(`${Math.round(displayScore)}`.padStart(9, 0)), canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05);
   const comboAnimation = Math.max(0, 1 - easeOutQuart(Math.min(Date.now() - comboAnimationMs, 500) / 500));
-  ctx.font = `${400 * (1 + comboAnimation * 0.5)} ${(canvas.height / 40) * (1 + comboAnimation)}px Montserrat, Pretendard JP Variable`;
+  ctx.font = `${400 * (1 + comboAnimation * 0.5)} ${(canvas.height / 40) * (1 + comboAnimation)}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
   ctx.fillStyle = "#fff";
   ctx.fillText(`${combo}x`, canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05 + canvas.height / 25);
   drawCursor();
@@ -1220,7 +1220,7 @@ const calculateResult = () => {
   }
   if (missPoint.length == 0) {
     missCtx.fillStyle = "#FFF";
-    missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+    missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     missCtx.textAlign = "right";
     missCtx.textBaseline = "bottom";
     missCtx.fillText("Perfect!", missCanvas.width - 10, missCanvas.height * 0.8 - 10);
@@ -1254,7 +1254,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
         }
         break;
       default:
-        ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+        ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
         ctx.fillStyle = "#F55";
         ctx.textAlign = "left";
         ctx.textBaseline = "top";
diff --git a/public/js/tutorial.js b/public/js/tutorial.js
index a5db8d8..e152c3c 100644
--- a/public/js/tutorial.js
+++ b/public/js/tutorial.js
@@ -373,7 +373,7 @@ const drawParticle = (n, x, y, j, d) => {
         let p = easeOutQuad((Date.now() - s) / 700);
         let newY = y - (canvas.height / 20) * p;
         ctx.fillStyle = getJudgeStyle(j.toLowerCase(), p, cx, newY);
-        ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+        ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
         ctx.fillText(j, cx, newY);
@@ -392,7 +392,7 @@ const drawParticle = (n, x, y, j, d) => {
       let p = easeOutQuad((Date.now() - missParticles[j].s) / 700);
       let newY = cy - (canvas.height / 20) * p;
       ctx.fillStyle = getJudgeStyle("miss", p);
-      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("Miss", cx, newY);
@@ -404,7 +404,7 @@ const drawParticle = (n, x, y, j, d) => {
       let p = easeOutQuad((Date.now() - perfectParticles[j].s) / 700);
       let newY = cy - (canvas.height / 20) * p;
       ctx.fillStyle = getJudgeStyle("perfect", p, cx, newY);
-      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("Perfect", cx, newY);
@@ -782,7 +782,7 @@ const drawKeyInput = () => {
     ctx.stroke();
     ctx.beginPath();
     ctx.fillStyle = "#fff";
-    ctx.font = `600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
+    ctx.font = `600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     ctx.textBaseline = "top";
     ctx.textAlign = "center";
     ctx.fillText(
@@ -826,7 +826,7 @@ const cntRender = () => {
       }
       fontSize = (canvas.height / 5) * easeOutSine((Date.now() - comboAlertMs) / 1000);
       ctx.beginPath();
-      ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.fillStyle = `rgba(200,200,200,${comboOpacity})`;
       ctx.textBaseline = "middle";
       ctx.textAlign = "center";
@@ -866,9 +866,9 @@ const cntRender = () => {
         if (renderTriggers[i].beat <= beats && beats <= renderTriggers[i].beat + renderTriggers[i].duration && disableText == false) {
           ctx.beginPath();
           ctx.fillStyle = "#fff";
-          ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable`;
+          ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           if (renderTriggers[i].size.indexOf("vh") != -1)
-            ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable`;
+            ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
           ctx.textAlign = renderTriggers[i].align;
           ctx.textBaseline = renderTriggers[i].valign;
           ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
@@ -980,7 +980,7 @@ const cntRender = () => {
     }
   } catch (e) {
     if (e) {
-      ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+      ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
       ctx.fillStyle = "#F55";
       ctx.textAlign = "left";
       ctx.textBaseline = "top";
@@ -1005,13 +1005,13 @@ const cntRender = () => {
     displayScore = score;
   }
   ctx.beginPath();
-  ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
+  ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
   ctx.fillStyle = "#fff";
   ctx.textAlign = "right";
   ctx.textBaseline = "top";
   ctx.fillText(numberWithCommas(`${Math.round(displayScore)}`.padStart(9, 0)), canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05);
   const comboAnimation = Math.max(0, 1 - easeOutQuart(Math.min(Date.now() - comboAnimationMs, 500) / 500));
-  ctx.font = `${400 * (1 + comboAnimation * 0.5)} ${(canvas.height / 40) * (1 + comboAnimation)}px Montserrat, Pretendard JP Variable`;
+  ctx.font = `${400 * (1 + comboAnimation * 0.5)} ${(canvas.height / 40) * (1 + comboAnimation)}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
   ctx.fillStyle = "#fff";
   ctx.fillText(`${combo}x`, canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05 + canvas.height / 25);
   drawCursor();
@@ -1206,7 +1206,7 @@ const calculateResult = () => {
   }
   if (missPoint.length == 0) {
     missCtx.fillStyle = "#FFF";
-    missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+    missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
     missCtx.textAlign = "right";
     missCtx.textBaseline = "bottom";
     missCtx.fillText("Perfect!", missCanvas.width - 10, missCanvas.height * 0.8 - 10);
@@ -1254,7 +1254,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
         }
         break;
       default:
-        ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
+        ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable, Pretendard JP, Pretendard`;
         ctx.fillStyle = "#F55";
         ctx.textAlign = "left";
         ctx.textBaseline = "top";