diff --git a/webui-src/app/scss/abstracts/_mixins.scss b/webui-src/app/scss/abstracts/_mixins.scss
index 9caad24..220bba3 100644
--- a/webui-src/app/scss/abstracts/_mixins.scss
+++ b/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');
+}
diff --git a/webui-src/app/scss/abstracts/_variables.scss b/webui-src/app/scss/abstracts/_variables.scss
index 3f05c49..ee61e01 100644
--- a/webui-src/app/scss/abstracts/_variables.scss
+++ b/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;
diff --git a/webui-src/app/scss/base/_reset.scss b/webui-src/app/scss/base/_reset.scss
index 7649050..f634572 100644
--- a/webui-src/app/scss/base/_reset.scss
+++ b/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 {
diff --git a/webui-src/app/scss/fontface/_Bold.scss b/webui-src/app/scss/fontface/_Bold.scss
new file mode 100644
index 0000000..5aeaeaa
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_BoldItalic.scss b/webui-src/app/scss/fontface/_BoldItalic.scss
new file mode 100644
index 0000000..51ae326
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_Italic.scss b/webui-src/app/scss/fontface/_Italic.scss
new file mode 100644
index 0000000..419dffb
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_Light.scss b/webui-src/app/scss/fontface/_Light.scss
new file mode 100644
index 0000000..4850fa9
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_LightItalic.scss b/webui-src/app/scss/fontface/_LightItalic.scss
new file mode 100644
index 0000000..a3c13e7
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_Medium.scss b/webui-src/app/scss/fontface/_Medium.scss
new file mode 100644
index 0000000..bf21277
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_MediumItalic.scss b/webui-src/app/scss/fontface/_MediumItalic.scss
new file mode 100644
index 0000000..513665f
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_Regular.scss b/webui-src/app/scss/fontface/_Regular.scss
new file mode 100644
index 0000000..da541aa
--- /dev/null
+++ b/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 */
diff --git a/webui-src/app/scss/fontface/_index.scss b/webui-src/app/scss/fontface/_index.scss
new file mode 100644
index 0000000..7da83a7
--- /dev/null
+++ b/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';
diff --git a/webui-src/app/scss/main.scss b/webui-src/app/scss/main.scss
index 1a0836e..48fc71a 100644
--- a/webui-src/app/scss/main.scss
+++ b/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';
diff --git a/webui-src/assets/webfonts/Roboto-Bold.ttf b/webui-src/assets/webfonts/Roboto-Bold.ttf
new file mode 100644
index 0000000..36fef35
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Bold.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-Bold.woff b/webui-src/assets/webfonts/Roboto-Bold.woff
new file mode 100644
index 0000000..49e88e7
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Bold.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-Bold.woff2 b/webui-src/assets/webfonts/Roboto-Bold.woff2
new file mode 100644
index 0000000..b666f7b
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Bold.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-BoldItalic.ttf b/webui-src/assets/webfonts/Roboto-BoldItalic.ttf
new file mode 100644
index 0000000..4b58a4b
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-BoldItalic.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-BoldItalic.woff b/webui-src/assets/webfonts/Roboto-BoldItalic.woff
new file mode 100644
index 0000000..fbb4eaa
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-BoldItalic.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-BoldItalic.woff2 b/webui-src/assets/webfonts/Roboto-BoldItalic.woff2
new file mode 100644
index 0000000..91841c5
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-BoldItalic.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-Italic.ttf b/webui-src/assets/webfonts/Roboto-Italic.ttf
new file mode 100644
index 0000000..317102d
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Italic.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-Italic.woff b/webui-src/assets/webfonts/Roboto-Italic.woff
new file mode 100644
index 0000000..72ac748
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Italic.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-Italic.woff2 b/webui-src/assets/webfonts/Roboto-Italic.woff2
new file mode 100644
index 0000000..709d421
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Italic.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-Light.ttf b/webui-src/assets/webfonts/Roboto-Light.ttf
new file mode 100644
index 0000000..2560347
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Light.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-Light.woff b/webui-src/assets/webfonts/Roboto-Light.woff
new file mode 100644
index 0000000..8144c8d
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Light.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-Light.woff2 b/webui-src/assets/webfonts/Roboto-Light.woff2
new file mode 100644
index 0000000..90bd8b5
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Light.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-LightItalic.ttf b/webui-src/assets/webfonts/Roboto-LightItalic.ttf
new file mode 100644
index 0000000..60c5bac
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-LightItalic.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-LightItalic.woff b/webui-src/assets/webfonts/Roboto-LightItalic.woff
new file mode 100644
index 0000000..417e538
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-LightItalic.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-LightItalic.woff2 b/webui-src/assets/webfonts/Roboto-LightItalic.woff2
new file mode 100644
index 0000000..8c877c8
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-LightItalic.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-Medium.ttf b/webui-src/assets/webfonts/Roboto-Medium.ttf
new file mode 100644
index 0000000..81b1b29
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Medium.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-Medium.woff b/webui-src/assets/webfonts/Roboto-Medium.woff
new file mode 100644
index 0000000..9ce5d75
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Medium.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-Medium.woff2 b/webui-src/assets/webfonts/Roboto-Medium.woff2
new file mode 100644
index 0000000..782aa16
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Medium.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-MediumItalic.ttf b/webui-src/assets/webfonts/Roboto-MediumItalic.ttf
new file mode 100644
index 0000000..757150e
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-MediumItalic.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-MediumItalic.woff b/webui-src/assets/webfonts/Roboto-MediumItalic.woff
new file mode 100644
index 0000000..79687c3
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-MediumItalic.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-MediumItalic.woff2 b/webui-src/assets/webfonts/Roboto-MediumItalic.woff2
new file mode 100644
index 0000000..4fb2c4f
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-MediumItalic.woff2 differ
diff --git a/webui-src/assets/webfonts/Roboto-Regular.ttf b/webui-src/assets/webfonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..fefdc75
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Regular.ttf differ
diff --git a/webui-src/assets/webfonts/Roboto-Regular.woff b/webui-src/assets/webfonts/Roboto-Regular.woff
new file mode 100644
index 0000000..aecff32
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Regular.woff differ
diff --git a/webui-src/assets/webfonts/Roboto-Regular.woff2 b/webui-src/assets/webfonts/Roboto-Regular.woff2
new file mode 100644
index 0000000..ea837f8
Binary files /dev/null and b/webui-src/assets/webfonts/Roboto-Regular.woff2 differ
diff --git a/webui-src/index.html b/webui-src/index.html
index 073dde3..8828c5e 100644
--- a/webui-src/index.html
+++ b/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>