diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index e6c1319..8f68902 100644
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -57,7 +57,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/scss/fonts.scss';
 
 .timer {
   height: 100%;
diff --git a/src/scss/fonts.scss b/src/scss/fonts.scss
index 1e19191..989c9a2 100644
--- a/src/scss/fonts.scss
+++ b/src/scss/fonts.scss
@@ -9,8 +9,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueBold.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueBold.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueBold.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
@@ -18,8 +18,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueBlackCond.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueBlackCond.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueBlackCond.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueBlackCond.woff') format('woff');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
@@ -27,8 +27,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueItalic.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueItalic.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueItalic.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueItalic.woff') format('woff');
     font-weight: 100;
     font-style: italic;
     font-display: swap;
@@ -36,8 +36,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueMedium.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueMedium.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueMedium.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueMedium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
@@ -45,8 +45,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueLight.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueLight.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueLight.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueLight.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
@@ -54,8 +54,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueBold.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueBold.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueBold.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
@@ -63,8 +63,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueRegular.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueRegular.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueRegular.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueRegular.woff') format('woff');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
@@ -72,8 +72,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueThin.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueThin.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueThin.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueThin.woff') format('woff');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
@@ -81,8 +81,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueLight.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueLight.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueLight.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueLight.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
@@ -90,8 +90,8 @@
 
 @font-face {
     font-family: 'HelveticaNeue';
-    src: url('/src/fonts/HelveticaNeueMedium.woff2') format('woff2'),
-        url('/src/fonts/HelveticaNeueMedium.woff') format('woff');
+    src: url('~@/fonts/HelveticaNeueMedium.woff2') format('woff2'),
+        url('~@/fonts/HelveticaNeueMedium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..bd72171
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,15 @@
+// vue.config.js
+module.exports = {
+    css: {
+        loaderOptions: {
+            // by default the `sass` option will apply to both syntaxes
+            // because `scss` syntax is also processed by sass-loader underlyingly
+            // but when configuring the `prependData` option
+            // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
+            // in that case, we can target the `scss` syntax separately using the `scss` option
+            scss: {
+                additionalData: `@import "~@/scss/fonts.scss";`
+            },
+        }
+    }
+}