diff --git a/packages/core/components/lyrics/lyricLine.svelte b/packages/core/components/lyrics/lyricLine.svelte
index 204327a..2dabc59 100644
--- a/packages/core/components/lyrics/lyricLine.svelte
+++ b/packages/core/components/lyrics/lyricLine.svelte
@@ -91,7 +91,7 @@
             } else {
                 blurRadius = Math.min(offset * blurRatio, 16);
             }
-            if (scrolling) blurRadius=0;
+            if (scrolling) blurRadius = 0;
             ref.style.filter = `blur(${blurRadius}px)`;
         }
     }
@@ -152,12 +152,12 @@
     }}
     style="transform: translate3d({positionX}px, {positionY}px, 0); transition-property: text-shadow;
     transition-duration: 0.36s; transition-timing-function: ease-out;
-    transform-origin: center left;"
+    transform-origin: center left; font-family: LyricFont, sans-serif;"
 >
     <span
         bind:this={clickMask}
         class="absolute w-[calc(100%-2.5rem)] lg:w-[calc(100%-3rem)] h-full
-        -translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)] z-[100] "
+        -translate-x-2 lg:-translate-x-5 -translate-y-5 rounded-lg duration-300 lg:hover:bg-[rgba(255,255,255,.15)] z-[100]"
     >
     </span>
     {#if debugMode}
@@ -166,14 +166,19 @@
         </span>
     {/if}
     {#if line.words !== undefined && line.words.length > 0}
-        <span
-            class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 `}
-        >
+        <span class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 `}>
             {#each line.words as word}
                 {#if word.word}
-                    {#each word.word.split("") as chr, i}
+                    {#each word.word.split('') as chr, i}
                         <span
-                            class={(line.start <= progress && progress <= line.end && progress > (word.endTime - word.startTime) * ((i)/word.word.length) + word.startTime ? "opacity-100 text-glow" : "opacity-35") + " inline-block duration-300"}
+                            class={(line.start <= progress &&
+                            progress <= line.end &&
+                            progress > (word.endTime - word.startTime) * (i / word.word.length) + word.startTime
+                                ? 'opacity-100 text-glow'
+                                : 'opacity-35') + ' inline-block ' + 
+                                (((word.endTime - word.startTime) > 0.6) ? '' : 'duration-200')}
+                            style={((word.endTime - word.startTime) < 0.3) ? '' :
+                            `transition-duration: ${(word.endTime - word.startTime) / 1.3}s;`}
                         >
                             {chr}
                         </span>
@@ -183,7 +188,8 @@
         </span>
     {:else}
         <span
-            class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 duration-200 ${line.start <= progress && progress <= line.end ? "opacity-100 text-glow" : "opacity-35"}`}
+            class={`text-white text-[2rem] leading-9 lg:text-5xl lg:leading-[4rem] font-semibold mr-4 duration-200 
+            ${line.start <= progress && progress <= line.end ? 'opacity-100 text-glow' : 'opacity-35'}`}
         >
             {line.text}
         </span>
@@ -197,13 +203,12 @@
     {/if}
 </div>
 
-
 <style>
     .text-glow {
         text-shadow:
-                0 0 3px #ffffff2c,
-                0 0 6px #ffffff2c,
-                0 15px 30px rgba(0, 0, 0, 0.11),
-                0 5px 15px rgba(0, 0, 0, 0.08);
+            0 0 3px #ffffff2c,
+            0 0 6px #ffffff2c,
+            0 15px 30px rgba(0, 0, 0, 0.11),
+            0 5px 15px rgba(0, 0, 0, 0.08);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/web/src/app.css b/packages/web/src/app.css
index 7d063e6..e13e418 100644
--- a/packages/web/src/app.css
+++ b/packages/web/src/app.css
@@ -28,7 +28,13 @@ h2 {
 
 body,
 html {
-  position: fixed;
-  overflow: hidden;
-  overscroll-behavior: none;
+    position: fixed;
+    overflow: hidden;
+    overscroll-behavior: none;
+}
+
+@font-face {
+    font-family: 'LyricFont';
+    src: url('/font.otf') format('opentype');
+    font-weight: 600; /* Semibold weight */
 }
diff --git a/packages/web/src/app.html b/packages/web/src/app.html
index ca14725..1f4904b 100644
--- a/packages/web/src/app.html
+++ b/packages/web/src/app.html
@@ -3,8 +3,6 @@
     <head>
         <meta charset="utf-8" />
         <!-- <link rel="icon" href="%sveltekit.assets%/favicon.png" /> -->
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>AquaVox</title>
         %sveltekit.head%
diff --git a/packages/web/static/font.otf b/packages/web/static/font.otf
new file mode 100644
index 0000000..4471d39
Binary files /dev/null and b/packages/web/static/font.otf differ