diff --git a/Backend/mocked-services/src/main/resources/static/css/common.css b/Backend/mocked-services/src/main/resources/static/css/common.css
index 04e0b19..350f678 100644
--- a/Backend/mocked-services/src/main/resources/static/css/common.css
+++ b/Backend/mocked-services/src/main/resources/static/css/common.css
@@ -1,8 +1,32 @@
 @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+/* @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); */
 @import url('r11addons.css');
 @import url('r11tables.css');
 @import url('r11tool.css');
 @import url('r11tooltip.css');
 @import url('r11modal.css');
-@import url('r11flexbox.css')
\ No newline at end of file
+@import url('r11flexbox.css');
+
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+  
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
+}
+  
\ No newline at end of file
diff --git a/Backend/mocked-services/src/main/resources/static/css/font/Material-Icons.woff2 b/Backend/mocked-services/src/main/resources/static/css/font/Material-Icons.woff2
new file mode 100644
index 0000000..5492a6e
Binary files /dev/null and b/Backend/mocked-services/src/main/resources/static/css/font/Material-Icons.woff2 differ
diff --git a/Backend/mocked-services/src/main/resources/static/css/font/Nunito-VariableFont_wght.ttf b/Backend/mocked-services/src/main/resources/static/css/font/Nunito-VariableFont_wght.ttf
new file mode 100644
index 0000000..87c50a8
Binary files /dev/null and b/Backend/mocked-services/src/main/resources/static/css/font/Nunito-VariableFont_wght.ttf differ
diff --git a/Backend/mocked-services/src/main/resources/static/css/r11tool.css b/Backend/mocked-services/src/main/resources/static/css/r11tool.css
index fd559f4..9368b0b 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11tool.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11tool.css
@@ -1,4 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+@font-face {
+    font-family: "Nunito";
+    src: url('font/Nunito-VariableFont_wght.ttf') format('truetype');
+}
 
 input {
     box-sizing: border-box;
@@ -98,7 +101,7 @@ body {
 
 .clickable-text.switch {
     font-size: 18px;
-    font-weight: 700;
+    font-weight: 300;
 }
 
 .clickable-text.switch span.toggleIndicator:before {
@@ -295,6 +298,20 @@ body {
     display: none;
 }
 
+h1 {
+    font-weight: 400;
+}
+
+h2 {
+    font-weight: 400;
+}
+
+h3 {
+    font-weight: 400;
+}
+
+
+
 /* TODO: Add proper class */
 /* textarea {
 	-webkit-box-sizing: border-box;
diff --git a/Frontend/assets/css/frame.css b/Frontend/assets/css/frame.css
index e1d622d..8b39a59 100644
--- a/Frontend/assets/css/frame.css
+++ b/Frontend/assets/css/frame.css
@@ -1,4 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
+@font-face {
+    font-family: "Nunito";
+    src: url('../fonts/Nunito-VariableFont_wght.ttf') format('truetype');
+}
 
 html {
     background-image: url("../images/background.jpg");
@@ -6,9 +9,9 @@ html {
 
 body {
     font-family: 'Nunito', sans-serif;
+    font-weight: 200;
     
     color: #2e3133;
-    font-weight: normal;
     margin: 0px;
 }
 
@@ -59,7 +62,7 @@ div#leftBar {
 
 li {
     font-size: 20px;
-    font-weight: bold;
+    font-weight: 300;
 }
 
 div#copyright{
diff --git a/Frontend/assets/css/tools/r11form.css b/Frontend/assets/css/tools/r11form.css
index 909a182..2c70e8c 100644
--- a/Frontend/assets/css/tools/r11form.css
+++ b/Frontend/assets/css/tools/r11form.css
@@ -1,7 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
 @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
 @import url('fontello.css');
 
+@font-face {
+    font-family: "Nunito";
+    src: url('../../fonts/Nunito-VariableFont_wght.ttf') format('truetype');
+}
+
+body {
+    font-weight: 300;
+}
 
 .hyperlink, .hyperlink:visited, .hyperlink:active {
     color: rgb(47, 125, 146);
@@ -54,6 +61,8 @@
 
 .container {
     font-family: 'Nunito', sans-serif;
+    
+
     display: flex;
     justify-content: left;
     width: 100%;
@@ -489,6 +498,14 @@ code {
     line-height: 150%;
 }
 
+h1 {
+    font-weight: 400;
+}
+
+h2 {
+    font-weight: 300;
+}
+
 @media only screen and (max-width: 1024px) {
     .rwd-hideable {
         display: none;
diff --git a/Frontend/assets/fonts/Nunito-Italic-VariableFont_wght.ttf b/Frontend/assets/fonts/Nunito-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..6a58fbf
Binary files /dev/null and b/Frontend/assets/fonts/Nunito-Italic-VariableFont_wght.ttf differ
diff --git a/Frontend/assets/fonts/Nunito-VariableFont_wght.ttf b/Frontend/assets/fonts/Nunito-VariableFont_wght.ttf
new file mode 100644
index 0000000..87c50a8
Binary files /dev/null and b/Frontend/assets/fonts/Nunito-VariableFont_wght.ttf differ