diff --git a/src/assets/fonts/Sora-Bold.otf b/src/assets/fonts/Sora-Bold.otf
deleted file mode 100644
index 4c255d54..00000000
Binary files a/src/assets/fonts/Sora-Bold.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-ExtraBold.otf b/src/assets/fonts/Sora-ExtraBold.otf
deleted file mode 100644
index 7d4a2ef8..00000000
Binary files a/src/assets/fonts/Sora-ExtraBold.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-Regular.otf b/src/assets/fonts/Sora-Regular.otf
deleted file mode 100644
index 0825bbb4..00000000
Binary files a/src/assets/fonts/Sora-Regular.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-SemiBold.otf b/src/assets/fonts/Sora-SemiBold.otf
deleted file mode 100644
index 34b384b5..00000000
Binary files a/src/assets/fonts/Sora-SemiBold.otf and /dev/null differ
diff --git a/src/assets/fonts/Sora-VariableFont_wght.ttf b/src/assets/fonts/Sora-VariableFont_wght.ttf
new file mode 100644
index 00000000..c2822d08
Binary files /dev/null and b/src/assets/fonts/Sora-VariableFont_wght.ttf differ
diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
index 1d819577..45866113 100644
--- a/src/styles/breadcrumbs.scss
+++ b/src/styles/breadcrumbs.scss
@@ -1,12 +1,12 @@
 .el-breadcrumb__separator {
   color: var(--s-color-base-content-tertiary);
-  font-weight: normal;
+  @include font-weight(400);
 }
 .el-breadcrumb__inner {
   color: var(--s-color-base-content-tertiary);
   &.is-link {
     color: var(--s-color-base-content-tertiary);
-    font-weight: normal;
+    @include font-weight(400);
     &:hover {
       color: var(--s-color-theme-accent);
     }
diff --git a/src/styles/button.scss b/src/styles/button.scss
index d9781392..1405704d 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -155,7 +155,6 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
   }
   span {
     font-feature-settings: var(--s-font-feature-settings-heading);
-    font-weight: normal;
     @include font-weight(700, true);
   }
 }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 76b599ff..b5b8152b 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -15,7 +15,7 @@ html {
 
 /* Typography */
 h1, h2, h3, h4, h5, h6 {
-  font-weight: normal;
+  @include font-weight(400);
   font-feature-settings: var(--s-font-feature-settings-heading);
 }
 
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index e5ebf686..a38a3c6b 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -5,29 +5,10 @@
   font-style: normal;
   font-display: block;
 }
-@font-face {
-  font-family: "SoraB";
-  src: url("~@/assets/fonts/Sora-Bold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraEB";
-  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraSB";
-  src: url("~@/assets/fonts/Sora-SemiBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
 @font-face {
   font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-Regular.otf");
-  font-weight: normal;
-  font-style: normal;
+  src: url("~@/assets/fonts/Sora-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 1 999;
 }
 @font-face {
   font-family: "JetBrainsMono";
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 008f1049..ebce83c7 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -86,11 +86,10 @@
   .per-page-text,
   .el-pagination__jump {
     color: var(--s-color-base-content-tertiary);
-    font-weight: normal;
+    @include font-weight(400);
   }
   .el-pager li {
     color: var(--s-color-base-content-primary);
-    font-weight: normal;
     @include font-weight(700);
     &.btn-quicknext,
     &.btn-quickprev {
@@ -146,7 +145,6 @@
     color: var(--s-color-theme-accent);
   }
   .el-select-dropdown__item.selected {
-    font-weight: normal;
     @include font-weight(700, true);
   }
 }
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 1e21f3d0..429e886c 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -258,7 +258,7 @@ $select-prefix-height: $s-size-mini;
     border-radius: var(--s-border-radius-mini);
   }
   &.selected {
-    font-weight: normal;
+    @include font-weight(400);
     &.hover {
       background-color: transparent;
     }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index b086786a..9ff56c95 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -46,7 +46,6 @@
   @include tabs-border-radius("mini", var(--s-border-radius-mini));
   .el-tabs__header {
     .el-tabs__item {
-      font-weight: normal;
       @include font-weight(600, true);
     }
   }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0a2e9637..e8267e60 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -216,21 +216,9 @@ $--breakpoints-spec: (
 
 // Mixin for font-weight (temporarily solution)
 @mixin font-weight($fontWeight: 400, $important: false) {
-  @if $fontWeight == 400 and $important == false {
-    font-family: "Sora", sans-serif;
-  } @else if $fontWeight == 400 and $important == true {
-    font-family: "Sora", sans-serif !important;
-  } @else if $fontWeight == 500 and $important == false {
-    font-family: "SoraSB", sans-serif;
-  } @else if $fontWeight == 500 and $important == true {
-    font-family: "SoraSB", sans-serif !important;
-  } @else if $fontWeight == 600 and $important == false {
-    font-family: "SoraB", sans-serif;
-  } @else if $fontWeight == 600 and $important == true {
-    font-family: "SoraB", sans-serif !important;
-  } @else if $fontWeight == 700 and $important == false {
-    font-family: "SoraEB", sans-serif;
-  } @else if $fontWeight == 700 and $important == true {
-    font-family: "SoraEB", sans-serif !important;
+  @if $important == false {
+    font-weight: $fontWeight;
+  } @else {
+    font-weight: $fontWeight !important;
   }
 }