From 036eecd1564465ba1f5dfaa33553fcbfb92c043f Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 4 Sep 2022 21:43:15 +0200
Subject: refactor(frontend): Inter font

Use a variable font to reduce the number of files to be deployed
---
 subprojects/frontend/index.html                  | 267 +----------------------
 subprojects/frontend/package.json                |   2 +-
 subprojects/frontend/src/theme/ThemeProvider.tsx |   3 +
 subprojects/frontend/vite.config.ts              |   4 +-
 4 files changed, 7 insertions(+), 269 deletions(-)

(limited to 'subprojects')

diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html
index f9e87485..8b6814eb 100644
--- a/subprojects/frontend/index.html
+++ b/subprojects/frontend/index.html
@@ -13,274 +13,9 @@
     <meta name="theme-color" media="(prefers-color-scheme:light)" content="#f5f5f5">
     <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b">
     <style>
+      @import '@fontsource/inter/variable.css';
       @import '@fontsource/jetbrains-mono/variable.css';
       @import '@fontsource/jetbrains-mono/variable-italic.css';
-
-      /* roboto-cyrillic-ext-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff2') format('woff2');
-        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-      }
-      /* roboto-cyrillic-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-300-normal.woff2') format('woff2');
-        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-      }
-      /* roboto-greek-ext-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-greek-ext-300-normal.woff2') format('woff2');
-        unicode-range: U+1F00-1FFF;
-      }
-      /* roboto-greek-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-greek-300-normal.woff2') format('woff2');
-        unicode-range: U+0370-03FF;
-      }
-      /* roboto-vietnamese-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-vietnamese-300-normal.woff2') format('woff2');
-        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
-      }
-      /* roboto-latin-ext-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-latin-ext-300-normal.woff2') format('woff2');
-        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
-      }
-      /* roboto-latin-300-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 300;
-        src: url('@fontsource/roboto/files/roboto-latin-300-normal.woff2') format('woff2');
-        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-      }
-      /* roboto-cyrillic-ext-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff2') format('woff2');
-        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-      }
-      /* roboto-cyrillic-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2') format('woff2');
-        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-      }
-      /* roboto-greek-ext-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-greek-ext-400-normal.woff2') format('woff2');
-        unicode-range: U+1F00-1FFF;
-      }
-      /* roboto-greek-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-greek-400-normal.woff2') format('woff2');
-        unicode-range: U+0370-03FF;
-      }
-      /* roboto-vietnamese-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-vietnamese-400-normal.woff2') format('woff2');
-        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
-      }
-      /* roboto-latin-ext-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2') format('woff2');
-        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
-      }
-      /* roboto-latin-400-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 400;
-        src: url('@fontsource/roboto/files/roboto-latin-400-normal.woff2') format('woff2');
-        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-      }
-      /* roboto-cyrillic-ext-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff2') format('woff2');
-        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-      }
-      /* roboto-cyrillic-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2') format('woff2');
-        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-      }
-      /* roboto-greek-ext-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-greek-ext-500-normal.woff2') format('woff2');
-        unicode-range: U+1F00-1FFF;
-      }
-      /* roboto-greek-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-greek-500-normal.woff2') format('woff2');
-        unicode-range: U+0370-03FF;
-      }
-      /* roboto-vietnamese-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-vietnamese-500-normal.woff2') format('woff2');
-        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
-      }
-      /* roboto-latin-ext-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-latin-ext-500-normal.woff2') format('woff2');
-        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
-      }
-      /* roboto-latin-500-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 500;
-        src: url('@fontsource/roboto/files/roboto-latin-500-normal.woff2') format('woff2');
-        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-      }
-      /* roboto-cyrillic-ext-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff2') format('woff2');
-        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
-      }
-      /* roboto-cyrillic-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-cyrillic-700-normal.woff2') format('woff2');
-        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
-      }
-      /* roboto-greek-ext-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-greek-ext-700-normal.woff2') format('woff2');
-        unicode-range: U+1F00-1FFF;
-      }
-      /* roboto-greek-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-greek-700-normal.woff2') format('woff2');
-        unicode-range: U+0370-03FF;
-      }
-      /* roboto-vietnamese-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-vietnamese-700-normal.woff2') format('woff2');
-        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
-      }
-      /* roboto-latin-ext-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2') format('woff2');
-        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
-      }
-      /* roboto-latin-700-normal*/
-      @font-face {
-        font-family: 'Roboto';
-        font-style: normal;
-        font-display: swap;
-        font-weight: 700;
-        src: url('@fontsource/roboto/files/roboto-latin-700-normal.woff2') format('woff2');
-        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
-      }
-
-      body {
-        color: #19202b;
-        background: #f5f5f5;
-        font-family: 'InterVariable', 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          color: #ebebff;
-          background: #21252b;
-        }
-      }
     </style>
   </head>
   <body>
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 9202542b..08522d35 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -32,8 +32,8 @@
     "@codemirror/view": "^6.2.2",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@fontsource/inter": "^4.5.12",
     "@fontsource/jetbrains-mono": "^4.5.10",
-    "@fontsource/roboto": "^4.5.8",
     "@lezer/common": "^1.0.1",
     "@lezer/highlight": "^1.0.0",
     "@lezer/lr": "^1.2.3",
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 6f9a712e..ffb18a06 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -67,6 +67,9 @@ declare module '@mui/material/styles' {
 }
 
 const typography: TypographyVariantsOptions = {
+  fontFamily:
+    '"InterVariable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+  fontWeightMedium: 600,
   fontWeightEditorNormal: 450,
   fontWeightEditorBold: 650,
   editor: {
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 0c13f133..7cea4642 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -73,7 +73,7 @@ export default defineConfig({
       files: [
         {
           match:
-            /(?:jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)|roboto-latin-(?:400|500)-normal).+\.woff2$/,
+            /(?:inter-latin-variable-wghtOnly-normal|jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)).+\.woff2$/,
           attributes: {
             type: 'font/woff2',
             as: 'font',
@@ -96,7 +96,7 @@ export default defineConfig({
       workbox: {
         globPatterns: [
           '**/*.{css,html,js}',
-          'roboto-latin-{300,400,500,700}-normal.*.woff2',
+          'inter-latin-variable-wghtOnly-normal.*.woff2',
           'jetbrains-mono-latin-variable-wghtOnly-{normal,italic}.*.woff2',
         ],
         dontCacheBustURLsMatching: /\.(?:css|js|woff2?)$/,
-- 
cgit v1.2.3-54-g00ecf