change font

lama_cleaner/app/package.json

@@ -51,6 +51,7 @@
     "hacktimer": "^1.1.3",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
+    "inter-ui": "^3.19.3",
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",

lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx

@@ -31,10 +31,8 @@ const CoffeeIcon = () => {
             flexDirection: 'column',
           }}
         >
-          <h4 style={{ lineHeight: '24px' }}>
-            Hi, if you found my project is useful, please conside buy me a
-            coffee to support my work. Thanks!
-          </h4>
+          Hi, if you found my project is useful, please conside buy me a coffee
+          to support my work. Thanks!
           <img
             src={CoffeeMachineGif}
             alt="coffee machine"

lama_cleaner/app/src/components/FileSelect/FileSelect.scss

@@ -30,6 +30,5 @@
 }
 
 .file-select-message {
-  font-family: 'WorkSans';
   text-align: center;
 }

lama_cleaner/app/src/components/shared/Button.scss

@@ -6,7 +6,6 @@
   column-gap: 1rem;
   background-color: var(--page-bg);
   color: var(--btn-text-color);
-  font-family: 'WorkSans', sans-serif;
   width: max-content;
   padding: 0.5rem;
   place-items: center;

lama_cleaner/app/src/styles/Mixins/_Mixins.scss

@@ -1,7 +1,6 @@
 @mixin accented-display($bg-color) {
   background: $bg-color;
   color: rgb(0, 0, 0);
-  font-family: 'WorkSans';
   padding: 0.5rem;
   border-radius: 0.5rem;
 }

lama_cleaner/app/src/styles/_Fonts.scss

@@ -1,19 +0,0 @@
-@font-face {
-  font-family: 'WorkSans';
-  src: url('../media/fonts/Work_Sans/WorkSans-Regular.ttf');
-}
-
-@font-face {
-  font-family: 'WorkSans-Semibold';
-  src: url('../media/fonts/Work_Sans/WorkSans-SemiBold.ttf');
-}
-
-@font-face {
-  font-family: 'WorkSans-Bold';
-  src: url('../media/fonts/Work_Sans/WorkSans-Bold.ttf');
-}
-
-@font-face {
-  font-family: 'WorkSans-Black';
-  src: url('../media/fonts/Work_Sans/WorkSans-Black.ttf');
-}

lama_cleaner/app/src/styles/_index.scss

@@ -1,5 +1,13 @@
+@use '~inter-ui/default' with (
+  $inter-font-display: swap,
+  $inter-font-path: '~inter-ui/Inter (web)'
+);
+@use '~inter-ui/variable' with (
+  $inter-font-display: swap,
+  $inter-font-path: '~inter-ui/Inter (web)'
+);
+
 // General
-@use './Fonts';
 @use './Colors';
 @use './ColorsDark';
 @use './Animations';
@@ -40,7 +48,15 @@
   padding: 0;
 }
 
-html,
-body {
-  font-family: 'WorkSans', sans-serif;
+@include default.all;
+@include variable.all;
+
+html {
+  font-family: 'Inter', 'system-ui';
+}
+
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: 'Inter var', 'system-ui';
+  }
 }