implement open sans as font

- write fontface which supports different font weights

frontend/src/assets/fonts/OpenSans.scss

@@ -0,0 +1,42 @@
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../fonts/OpenSans/OpenSans-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('../fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: "OpenSans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
+}
+
+
+

frontend/src/style/styles.scss

@@ -1,7 +1,7 @@
 @import "custom_angular";
 @import "_variables";
 @import "custom_bootstrap";
-@import "fonts/Roboto";
+@import "fonts/OpenSans";
 @import "fonts/MaterialIcons";
 
 html,
@@ -10,8 +10,8 @@ body.okr {
   margin: 0;
   padding: 0;
   background-color: $overview-bg;
-  font-family: Roboto, sans-serif;
-  --bs-body-font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: OpenSans, "sans-serif";
+  --bs-body-font-family: OpenSans;
 
   h1 {
     font-size: 1.5rem;