Fix a few classes and change fonts

frontend/.browserlistrc

@@ -0,0 +1,6 @@
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

frontend/package.json

@@ -50,6 +50,7 @@
     "@cypress/skip-test": "^2.6.1",
     "@types/jest": "^29.5.13",
     "@types/uuid": "^10.0.0",
+    "browserslist": "^4.24.2",
     "cypress": "^13.15.0",
     "cypress-real-events": "^1.13.0",
     "jest": "^29.7.0",

frontend/src/app/components/keyresult/keyresult.component.html

@@ -5,7 +5,7 @@
   class="key-result rounded-2 p-3 w-100 focus-outline"
   tabindex="0"
 >
-  <h3 class="fw-normal linebreak mb-3">{{ keyResult.title }}</h3>
+  <h3 class="linebreak mb-3">{{ keyResult.title }}</h3>
   <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-2">
     <div class="d-flex justify-content-center align-items-center flex-wrap">

frontend/src/assets/fonts/Roboto.scss

@@ -1,9 +1,9 @@
 @font-face {
-  font-family: Roboto;
-  font-display: swap;
+  font-family: "Roboto";
   font-style: normal;
-  font-weight: 400;
-  src: url('./Roboto/RobotoFlex-Regular.ttf') format('ttf'),
-  url('./Roboto/RobotoFlex-Regular.woff2') format('woff2'),
-  url('./Roboto/RobotoFlex-Regular.woff') format('woff');
+  font-display: swap;
+  src:
+    url('./Roboto/RobotoFlex-Regular.woff2') format('woff2'),
+    url('./Roboto/RobotoFlex-Regular.woff') format('woff'),
+    url('./Roboto/RobotoFlex-Regular.ttf') format('truetype');
 }

frontend/src/style/styles.scss

@@ -6,9 +6,10 @@
 
 html,
 body.okr {
-  font-size: 100%;
   margin: 0;
   padding: 0;
+  font-weight: 400;
+  line-height: 115% !important;
   background-color: $overview-bg;
   font-family: "Roboto", sans-serif;
   --bs-body-font-family: "Roboto", "Helvetica Neue", sans-serif;