WIP

package-lock.json

@@ -9,8 +9,6 @@
       "version": "2.1.2",
       "license": "MIT",
       "dependencies": {
-        "@fontsource/noto-sans": "^4.5.11",
-        "@fontsource/public-sans": "^4.5.10",
         "@khanacademy/simple-markdown": "^0.8.3",
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
         "@tippyjs/react": "^4.2.6",
@@ -1831,16 +1829,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@fontsource/noto-sans": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@fontsource/noto-sans/-/noto-sans-4.5.11.tgz",
-      "integrity": "sha512-lBX7FCjIjSrQ+iMuXUuO+mbjbnUsJyZANg/04PgkeeAYe+cwnX81ibbgrAk1F56M6/btIrWQoDjxsK6Sz8KoVQ=="
-    },
-    "node_modules/@fontsource/public-sans": {
-      "version": "4.5.10",
-      "resolved": "https://registry.npmjs.org/@fontsource/public-sans/-/public-sans-4.5.10.tgz",
-      "integrity": "sha512-WHqsfQXyjrIy9cQVnsVvnNRIvqB5K9+4OieYSZGRkOhAe7XSR6ghiwjkXVwF6Sc6iGE0YSBpktPymYt2USbHYw=="
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -14826,16 +14814,6 @@
         }
       }
     },
-    "@fontsource/noto-sans": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@fontsource/noto-sans/-/noto-sans-4.5.11.tgz",
-      "integrity": "sha512-lBX7FCjIjSrQ+iMuXUuO+mbjbnUsJyZANg/04PgkeeAYe+cwnX81ibbgrAk1F56M6/btIrWQoDjxsK6Sz8KoVQ=="
-    },
-    "@fontsource/public-sans": {
-      "version": "4.5.10",
-      "resolved": "https://registry.npmjs.org/@fontsource/public-sans/-/public-sans-4.5.10.tgz",
-      "integrity": "sha512-WHqsfQXyjrIy9cQVnsVvnNRIvqB5K9+4OieYSZGRkOhAe7XSR6ghiwjkXVwF6Sc6iGE0YSBpktPymYt2USbHYw=="
-    },
     "@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",

package.json

@@ -15,8 +15,6 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/noto-sans": "^4.5.11",
-    "@fontsource/public-sans": "^4.5.10",
     "@khanacademy/simple-markdown": "^0.8.3",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
     "@tippyjs/react": "^4.2.6",

public/font/supreme/README.md

@@ -0,0 +1,41 @@
+# Installing Webfonts
+Follow these simple Steps.
+
+## 1.
+Put `supreme/` Folder into a Folder called `fonts/`.
+
+## 2.
+Put `supreme.css` into your `css/` Folder.
+
+## 3. (Optional)
+You may adapt the `url('path')` in `supreme.css` depends on your Website Filesystem.
+
+## 4.
+Import `supreme.css` at the top of you main Stylesheet.
+
+```
+@import url('supreme.css');
+```
+
+## 5.
+
+
+```
+font-family: 'Supreme-Variable';
+font-family: 'Supreme-VariableItalic';
+font-family: 'Supreme-Thin';
+font-family: 'Supreme-ThinItalic';
+font-family: 'Supreme-Extralight';
+font-family: 'Supreme-ExtralightItalic';
+font-family: 'Supreme-Light';
+font-family: 'Supreme-LightItalic';
+font-family: 'Supreme-Regular';
+font-family: 'Supreme-Italic';
+font-family: 'Supreme-Medium';
+font-family: 'Supreme-MediumItalic';
+font-family: 'Supreme-Bold';
+font-family: 'Supreme-BoldItalic';
+font-family: 'Supreme-Extrabold';
+font-family: 'Supreme-ExtraboldItalic';
+```
+

public/font/supreme/css/supreme.css

@@ -0,0 +1,175 @@
+@font-face {
+  font-family: 'Supreme-Variable';
+  src: url('../fonts/Supreme-Variable.woff2') format('woff2'),
+       url('../fonts/Supreme-Variable.woff') format('woff'),
+       url('../fonts/Supreme-Variable.ttf') format('truetype');
+       font-weight: 100 800;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-VariableItalic';
+  src: url('../fonts/Supreme-VariableItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-VariableItalic.woff') format('woff'),
+       url('../fonts/Supreme-VariableItalic.ttf') format('truetype');
+       font-weight: 100 800;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Thin';
+  src: url('../fonts/Supreme-Thin.woff2') format('woff2'),
+       url('../fonts/Supreme-Thin.woff') format('woff'),
+       url('../fonts/Supreme-Thin.ttf') format('truetype');
+       font-weight: 100;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ThinItalic';
+  src: url('../fonts/Supreme-ThinItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ThinItalic.woff') format('woff'),
+       url('../fonts/Supreme-ThinItalic.ttf') format('truetype');
+       font-weight: 100;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Extralight';
+  src: url('../fonts/Supreme-Extralight.woff2') format('woff2'),
+       url('../fonts/Supreme-Extralight.woff') format('woff'),
+       url('../fonts/Supreme-Extralight.ttf') format('truetype');
+       font-weight: 200;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ExtralightItalic';
+  src: url('../fonts/Supreme-ExtralightItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ExtralightItalic.woff') format('woff'),
+       url('../fonts/Supreme-ExtralightItalic.ttf') format('truetype');
+       font-weight: 200;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Light';
+  src: url('../fonts/Supreme-Light.woff2') format('woff2'),
+       url('../fonts/Supreme-Light.woff') format('woff'),
+       url('../fonts/Supreme-Light.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-LightItalic';
+  src: url('../fonts/Supreme-LightItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-LightItalic.woff') format('woff'),
+       url('../fonts/Supreme-LightItalic.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Regular';
+  src: url('../fonts/Supreme-Regular.woff2') format('woff2'),
+       url('../fonts/Supreme-Regular.woff') format('woff'),
+       url('../fonts/Supreme-Regular.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Italic';
+  src: url('../fonts/Supreme-Italic.woff2') format('woff2'),
+       url('../fonts/Supreme-Italic.woff') format('woff'),
+       url('../fonts/Supreme-Italic.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Medium';
+  src: url('../fonts/Supreme-Medium.woff2') format('woff2'),
+       url('../fonts/Supreme-Medium.woff') format('woff'),
+       url('../fonts/Supreme-Medium.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-MediumItalic';
+  src: url('../fonts/Supreme-MediumItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-MediumItalic.woff') format('woff'),
+       url('../fonts/Supreme-MediumItalic.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Bold';
+  src: url('../fonts/Supreme-Bold.woff2') format('woff2'),
+       url('../fonts/Supreme-Bold.woff') format('woff'),
+       url('../fonts/Supreme-Bold.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-BoldItalic';
+  src: url('../fonts/Supreme-BoldItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-BoldItalic.woff') format('woff'),
+       url('../fonts/Supreme-BoldItalic.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Extrabold';
+  src: url('../fonts/Supreme-Extrabold.woff2') format('woff2'),
+       url('../fonts/Supreme-Extrabold.woff') format('woff'),
+       url('../fonts/Supreme-Extrabold.ttf') format('truetype');
+       font-weight: 800;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ExtraboldItalic';
+  src: url('../fonts/Supreme-ExtraboldItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ExtraboldItalic.woff') format('woff'),
+       url('../fonts/Supreme-ExtraboldItalic.ttf') format('truetype');
+       font-weight: 800;
+       font-display: swap;
+       font-style: italic;
+}
+

src/font.js

@@ -1,6 +0,0 @@
-import '@fontsource/noto-sans/300.css';
-import '@fontsource/noto-sans/400.css';
-import '@fontsource/noto-sans/500.css';
-import '@fontsource/noto-sans/600.css';
-import '@fontsource/noto-sans/700.css';
-import '@fontsource/public-sans/variable.css';

src/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import './font';
 import './index.scss';
 
 import settings from './client/state/settings';

src/index.scss

@@ -1,4 +1,5 @@
 @use './app/partials/screen';
+@import '../public/font/supreme/css/supreme.css';
 
 :root {
 
@@ -131,15 +132,15 @@
 
   /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 36px;
-  --ls-h1: 0;
+  --ls-h1: -1.5px;
   --lh-h1: 38px;
 
   --fs-h2: 24px;
-  --ls-h2: 0;
+  --ls-h2: -0.5px;
   --lh-h2: 30px;
 
   --fs-s1: 18px;
-  --ls-s1: 0;
+  --ls-s1: -0.2px;
   --lh-s1: 24px;
 
   --fs-b1: 16px;
@@ -156,8 +157,8 @@
 
   /* font-weight */
   --fw-light: 300;
-  --fw-normal: 400;
+  --fw-normal: 440;
-  --fw-medium: 500;
+  --fw-medium: 600;
   --fw-bold: 700;
 
 
@@ -192,8 +193,9 @@
   --fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
   --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
 
-  --font-primary: 'Public SansVariable', 'Noto Sans', sans-serif;
+  --supreme-font: 'Supreme-Variable', 'Supreme-VariableItalic', 'Supreme-Thin', 'Supreme-ThinItalic', 'Supreme-Extralight', 'Supreme-ExtralightItalic', 'Supreme-Light', 'Supreme-LightItalic', 'Supreme-Regular', 'Supreme-Italic', 'Supreme-Medium', 'Supreme-MediumItalic', 'Supreme-Bold', 'Supreme-BoldItalic', 'Supreme-Extrabold', 'Supreme-ExtraboldItalic';
-  --font-secondary: 'Public SansVariable', 'Noto Sans', sans-serif;
+  --font-primary: var(--supreme-font), Arial, sans-serif;
+  --font-secondary: var(--font-primary);
 }
 
 
@@ -275,16 +277,8 @@
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
 
-  /* font styles: font-size, letter-spacing, line-hight */
-  --fs-h1: 36px;
-  --fs-h2: 24px;
-  --fs-s1: 18px;
-  --fs-b1: 15px;
-  --fs-b2: 14px;
-  --fs-b3: 12px;
-
   /* override normal font weight for dark mode */
-  --fw-normal: 330;
+  --fw-normal: 340;
 }
 
 .dark-theme,
@@ -327,24 +321,6 @@
   font-family: var(--font-primary);
 
   /* override font styles for primary font */
-  --fs-h1: 36px;
-  --lh-h1: 38px;
-
-  --fs-h2: 24px;
-  --lh-h2: 30px;
-
-  --fs-s1: 18px;
-  --lh-s1: 24px;
-
-  --fs-b1: 16px;
-  --lh-b1: 24px;
-
-  --fs-b2: 14px;
-  --lh-b2: 20px;
-
-  --fs-b3: 12px;
-  --lh-b3: 16px;
-
   --fw-light: 400;
   --fw-normal: 500;
   --fw-medium: 600;
@@ -366,7 +342,7 @@ body {
   background-color: var(--bg-surface-low);
 
   /*Why font-variant-ligatures => https://github.com/rsms/inter/issues/222 */
-  font-variant-ligatures: no-contextual;
+  font-variant-ligatures: no-common-ligatures;
 }
 #root {
   width: 100%;