feat: remove google font and use local font included with webui

webui-src/app/scss/abstracts/_mixins.scss

@@ -37,6 +37,7 @@
 @mixin blockquote($type) {
   position: relative;
   line-height: 1.2;
+
   @if ($type == 'info') {
     color: transparentize($dark-color, 0.2);
     border: 1px solid transparentize($primary-retro-color, 0.2);
@@ -45,11 +46,13 @@
   } @else if ($type == 'danger') {
     border: 1px solid transparentize($red-color, 0.2);
   }
+
   &::before {
     font-family: 'Font Awesome 5 Free';
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
+
     @if ($type == 'info') {
       content: '\f05a';
       color: $primary-color;
@@ -65,16 +68,28 @@
 
 @mixin flex($direction: '', $justify: '', $align: '', $gap: 0) {
   display: flex;
+
   @if ($direction != '') {
     flex-direction: $direction;
   }
+
   @if ($justify != '') {
     justify-content: $justify;
   }
+
   @if ($align != '') {
     align-items: $align;
   }
-  @if ($gap != 0) {
+
+  @if ($gap !=0) {
     gap: $gap;
   }
 }
+
+// Font
+@mixin fontdef-woff($FontPath, $FontName, $FontVersion: '1.0.0', $FontType: 'Regular') {
+  src:
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.woff2') format('woff2'),
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.woff') format('woff'),
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.ttf') format('truetype');
+}

webui-src/app/scss/abstracts/_variables.scss

@@ -1,3 +1,6 @@
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
+$FontPath: './webfonts' !default;
+$FontName: 'Roboto' !default;
+$FontVersion: '3.008' !default;

webui-src/app/scss/base/_reset.scss

@@ -43,6 +43,7 @@ body {
   text-rendering: optimizeSpeed;
   line-height: 1.5;
   font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
+  letter-spacing: -0.025ch;
 }
 
 /* A elements that don't have a class get default styles */
@@ -70,6 +71,7 @@ select {
   html:focus-within {
     scroll-behavior: auto;
   }
+
   *,
   *::before,
   *::after {

webui-src/app/scss/fontface/_Bold.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Bold */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Bold');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Bold');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* END Bold */

webui-src/app/scss/fontface/_BoldItalic.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'BoldItalic');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'BoldItalic');
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* END Bold Italic */

webui-src/app/scss/fontface/_Italic.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Italic');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Italic');
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* END Italic */

webui-src/app/scss/fontface/_Light.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Light */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Light');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* END Light */

webui-src/app/scss/fontface/_LightItalic.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Light Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'LightItalic');
+  font-weight: 300;
+  font-style: italic;
+}
+
+/* END Light Italic */

webui-src/app/scss/fontface/_Medium.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Medium */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Medium');
+  font-weight: 500;
+  font-style: normal;
+}
+
+/* END Medium */

webui-src/app/scss/fontface/_MediumItalic.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Medium Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'MediumItalic');
+  font-weight: 500;
+  font-style: italic;
+}
+
+/* END Medium Italic */

webui-src/app/scss/fontface/_Regular.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Regular */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Regular');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Regular');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* END Regular */

webui-src/app/scss/fontface/_index.scss

@@ -0,0 +1,8 @@
+@forward 'Bold';
+@forward 'BoldItalic';
+@forward 'Medium';
+@forward 'MediumItalic';
+@forward 'Regular';
+@forward 'Italic';
+@forward 'Light';
+@forward 'LightItalic';

webui-src/app/scss/main.scss

@@ -1,20 +1,22 @@
 @charset "UTF-8";
 
 // 1. Configuration and helpers
-@use "abstracts";
+@use 'abstracts';
+
+// 2. Font faces
+@use 'fontface';
 
 // 2. Vendors specific files
-@use "vendors";
+@use 'vendors';
 
 // 3. Base stuff
-@use "base";
+@use 'base';
 
 // 4. Components
-@use "components";
+@use 'components';
 
 // 5. Layout-related sections
-@use "layouts";
+@use 'layouts';
 
 // 6. Page-specific styles
-@use "pages";
-
+@use 'pages';

webui-src/index.html

@@ -3,12 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
-      rel="stylesheet"
-    />
     <link rel="stylesheet" href="styles.css" />
     <link href="images/retroshare.svg" rel="icon" data-n-head="true" type="image/svg" />
     <title>RetroShare</title>