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 095a64bc..1405704d 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -153,6 +153,10 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
       @include disabled;
     }
   }
+  span {
+    font-feature-settings: var(--s-font-feature-settings-heading);
+    @include font-weight(700, true);
+  }
 }
 button {
   > span > i {
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index f732c9d8..67cab530 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -21,6 +21,9 @@
   @include checkbox-border-radius("medium", var(--s-border-radius-medium));
   @include checkbox-border-radius("small", var(--s-border-radius-small));
   @include checkbox-border-radius("mini", var(--s-border-radius-mini));
+  &__label {
+    line-height: var(--s-line-height-big);
+  }
   &.is-bordered {
     &,
     &.is-disabled,
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 10d205ef..bf75e909 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -5,6 +5,7 @@
 
 html {
   box-sizing: border-box;
+  font-feature-settings: var(--s-font-feature-settings-common);
 }
 
 *, *:before, *:after {
@@ -15,34 +16,53 @@ html {
 /* Typography */
 h1, h2, h3, h4, h5, h6 {
   font-family: $s-font-family-default;
+  font-feature-settings: var(--s-font-feature-settings-heading);
 }
 
 h1, h2, h3, h4 {
-  font-weight: normal;
+  @include font-weight(400);
 }
 
-h5, h6 {
-  font-weight: bold;
+h1, h2 {
+  letter-spacing: var(--s-letter-spacing-mini);
 }
 
 h1 {
   font-size: var(--s-heading1-font-size);
+  line-height: var(--s-line-height-mini);
 }
 
 h2 {
   font-size: var(--s-heading2-font-size);
 }
 
+h2, h3 {
+  line-height: var(--s-line-height-small);
+}
+
+h3, h4 {
+  letter-spacing: var(--s-letter-spacing-small);
+}
+
 h3 {
   font-size: var(--s-heading3-font-size);
 }
 
+h4, h5, h6 {
+  line-height: var(--s-line-height-medium);
+}
+
 h4 {
   font-size: var(--s-heading4-font-size);
 }
 
+h5, h6 {
+  @include font-weight(700);
+}
+
 h5 {
   font-size: var(--s-heading5-font-size);
+  letter-spacing: var(--s-letter-spacing-big);
 }
 
 h6 {
@@ -54,7 +74,7 @@ h6 {
 }
 
 .s-bold {
-  font-weight: bold;
+  @include font-weight(700);
 }
 
 .s-big {
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index b2cfe8e3..f85aed5f 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -134,7 +134,7 @@ $date-picker-padding: 8px;
       .el-input__inner,
       .el-range-input,
       .el-range-separator {
-        font-weight: bold;
+        @include font-weight(700, true);
       }
       &.el-input__inner,
       & .el-input__inner {
@@ -145,7 +145,7 @@ $date-picker-padding: 8px;
         &::placeholder,
         .el-range-input::placeholder {
           color: var(--s-color-base-content-tertiary);
-          font-weight: bold;
+          @include font-weight(700, true);
         }
       }
     }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index a2e1b13e..9f16603d 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -21,10 +21,13 @@
   .s-border-radius-mini & {
     border-radius: var(--s-border-radius-mini);
   }
+  .el-dialog__header .el-dialog__title {
+    @include font-weight(700, true);
+  }
   .el-dialog__title {
-    font-weight: bold;
     font-size: var(--s-heading5-font-size);
     color: var(--s-color-base-content-primary);
+    font-feature-settings: var(--s-font-feature-settings-heading);
   }
   > * {
     word-break: break-word;
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 1a3a0abb..ebce83c7 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -53,7 +53,7 @@
       .el-select__caret,
       .el-input__inner {
         color: var(--s-color-base-content-primary);
-        font-weight: bold;
+        @include font-weight(700);
       }
       .el-select__caret {
         margin-right: 6px;
@@ -86,10 +86,11 @@
   .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);
+    @include font-weight(700);
     &.btn-quicknext,
     &.btn-quickprev {
       color: var(--s-color-base-content-primary);
@@ -139,6 +140,11 @@
     }
   }
 }
-.el-select-dropdown__item.selected {
-  color: var(--s-color-theme-accent);
+.el-select-dropdown {
+  &__item.selected {
+    color: var(--s-color-theme-accent);
+  }
+  .el-select-dropdown__item.selected {
+    @include font-weight(700, true);
+  }
 }
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index f8e5837d..b9c13c32 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -23,6 +23,9 @@ $radio-button-border-color: var(--s-color-theme-accent);
 
 .el-radio {
   color: var(--s-color-base-content-primary);
+  &__label {
+    line-height: var(--s-line-height-big);
+  }
   &.s-big {
     @extend .s-big;
     line-height: $s-size-big;
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index fcecae44..9076a17b 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -3,7 +3,7 @@
   font-size: var(--s-font-size-small);
 }
 .s-scroll-menu {
-  font-weight: 600;
+  @include font-weight(600);
   ul {
     position: sticky;
     top: 0;
@@ -53,7 +53,7 @@
     }
   }
   .title {
-    font-weight: bold;
+    @include font-weight(700);
     display: block;
     padding-bottom: 12px;
   }
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 97057348..429e886c 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -174,13 +174,13 @@ $select-prefix-height: $s-size-mini;
           }
         }
         .el-input__inner {
-          font-weight: bold;
+          @include font-weight(700);
           &:hover {
             border-color: var(--s-color-base-border-primary);
           }
           &::placeholder {
             color: var(--s-color-base-content-tertiary);
-            font-weight: bold;
+            @include font-weight(700);
           }
           &:focus {
             border-color: var(--s-color-base-border-primary);
@@ -253,12 +253,12 @@ $select-prefix-height: $s-size-mini;
     border: 1px solid var(--s-color-base-border-primary);
     background-color: var(--s-color-utility-surface);
     font-size: var(--s-icon-font-size-mini);
-    font-weight: bold;
+    @include font-weight(700);
     padding: 1px;
     border-radius: var(--s-border-radius-mini);
   }
   &.selected {
-    font-weight: normal;
+    @include font-weight(400);
     &.hover {
       background-color: transparent;
     }
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 587a6372..af110e8b 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -55,6 +55,9 @@
   border-bottom: none;
 }
 .el-table__header {
+  thead th .cell {
+    @include font-weight(700, true);
+  }
   label.el-checkbox.is-disabled {
     cursor: not-allowed;
     pointer-events: none;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index bb58c62e..9ff56c95 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -44,8 +44,12 @@
   @include tabs-border-radius("medium", var(--s-border-radius-medium));
   @include tabs-border-radius("small", var(--s-border-radius-small));
   @include tabs-border-radius("mini", var(--s-border-radius-mini));
+  .el-tabs__header {
+    .el-tabs__item {
+      @include font-weight(600, true);
+    }
+  }
   .el-tabs__item {
-    font-weight: bold;
     .el-icon-close {
       &:before {
         font-weight: bold;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 30254a87..e8267e60 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -76,6 +76,27 @@ $s-heading3-font-size: 24px !default;
 $s-heading4-font-size: 18px !default;
 $s-heading5-font-size: 16px !default;
 $s-heading6-font-size: 14px !default;
+// Font Line Height
+$s-line-height-base: 1.4;
+$s-line-height-mini: 1.2;
+$s-line-height-small: 1.3;
+$s-line-height-medium: 1.5;
+$s-line-height-big: 1.8;
+// Letter Spacing
+$s-letter-spacing-mini: -0.04em;
+$s-letter-spacing-small: -0.02em;
+$s-letter-spacing-medium: -0.01em;
+$s-letter-spacing-big: 0.01em;
+$s-letter-spacing-type: 0.06em;
+// Font Feature Settings
+$s-font-feature-settings-common: "tnum" on, "lnum" on, "case" on, "salt" on, "ss01" on;
+$s-font-feature-settings-heading: "tnum" on, "lnum" on, "salt" on, "case" on;
+$s-font-feature-settings-caps-heading: "tnum" on, "lnum" on, "case" on;
+$s-font-feature-settings-caps: "case" on;
+$s-font-feature-settings-singleline: "salt" on, "case" on;
+$s-font-feature-settings-card-title: "tnum" on, "lnum" on, "ss01" on;
+$s-font-feature-settings-input: "tnum" on, "lnum" on;
+$s-font-feature-settings-button: "tnum" on, "lnum" on, "salt" on;
 
 // Responsive
 $--sm: 640px !default;
@@ -151,6 +172,27 @@ $--breakpoints-spec: (
   --s-heading4-font-size: #{$s-heading4-font-size};
   --s-heading5-font-size: #{$s-heading5-font-size};
   --s-heading6-font-size: #{$s-heading6-font-size};
+  // Font Line Height
+  --s-line-height-base: #{$s-line-height-base};
+  --s-line-height-mini: #{$s-line-height-mini};
+  --s-line-height-small: #{$s-line-height-small};
+  --s-line-height-medium: #{$s-line-height-medium};
+  --s-line-height-big: #{$s-line-height-big};
+  // Letter Spacing
+  --s-letter-spacing-mini: #{$s-letter-spacing-mini};
+  --s-letter-spacing-small: #{$s-letter-spacing-small};
+  --s-letter-spacing-medium: #{$s-letter-spacing-medium};
+  --s-letter-spacing-big: #{$s-letter-spacing-big};
+  --s-letter-spacing-type: #{$s-letter-spacing-type};
+  // Font Feature Settings
+  --s-font-feature-settings-common: #{$s-font-feature-settings-common};
+  --s-font-feature-settings-heading: #{$s-font-feature-settings-heading};
+  --s-font-feature-settings-caps-heading: #{$s-font-feature-settings-caps-heading};
+  --s-font-feature-settings-caps: #{$s-font-feature-settings-caps};
+  --s-font-feature-settings-singleline: #{$s-font-feature-settings-singleline};
+  --s-font-feature-settings-card-title: #{$s-font-feature-settings-card-title};
+  --s-font-feature-settings-input: #{$s-font-feature-settings-input};
+  --s-font-feature-settings-button: #{$s-font-feature-settings-button};
   // Size
   --s-size-mini: #{$s-size-mini};
   --s-size-small: #{$s-size-small};
@@ -171,3 +213,12 @@ $--breakpoints-spec: (
   --s-shadow-mobile-tap-bar: #{$s-shadow-mobile-tap-bar};
   --s-shadow-mobile-side-menu: #{$s-shadow-mobile-side-menu};
 }
+
+// Mixin for font-weight (temporarily solution)
+@mixin font-weight($fontWeight: 400, $important: false) {
+  @if $important == false {
+    font-weight: $fontWeight;
+  } @else {
+    font-weight: $fontWeight !important;
+  }
+}