fix(frontend): roboto font loading DEV-887 (#6199)

### 💭 Notes

Firefox has a feature that protects users from being targeted using
their available system fonts. This feature causes our Roboto font to not
be properly loaded when using Private browsing. I'm updating the way in
which we load Roboto to avoid the problem.

### 👀 Preview steps

1. Use Private browsing in Firefox
2. Open any KPI route (don't even need to be logged in)
3. 🔴 [on main] notice that the font used is the default sans-serif
browser font
4. 🟢 [on PR] notice that the font used is Roboto

ℹ️ The easiest way is to use Dev Tools, and in "Inspector" tab selecting
"Fonts" sub-tab on the right. "All Fonts on Page" should list only
`k-icons` and few different `Roboto` (all comming from
`/static/compiled/…`).

---------

Co-authored-by: Paulo Amorim <[email protected]>

Author: magicznyleszek

jsapp/js/main.js

@@ -10,6 +10,16 @@
  */
 import 'jquery-ui/ui/widgets/sortable'
 import '@mantine/core/styles.css'
+// We import all the weights and styles we actually use here to avoid unnecessary weight (pun intended).
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/400-italic.css'
+import '@fontsource/roboto/500.css'
+// Roboto doesn't have semibold (600) version. We do use 600 font weight a lot in our styles, but they all are rendered
+// as weight 700. To have true 600, we would need to switch to variable font Roboto Flex - but this would require more
+// refactor, and AFAIK would also not play nicely with Mantine which uses "Roboto" as default font and doesn't seem
+// ready for using a variable font.
+// import '@fontsource/roboto/600.css'
+import '@fontsource/roboto/700.css'
 import '../scss/main.scss'
 
 import React from 'react'

jsapp/scss/fonts/_roboto.scss

@@ -6,7 +6,6 @@
 
 @include meta.load-css('./libs/mdl');
 
-@include meta.load-css('./fonts/roboto');
 @include meta.load-css('../fonts/k-icons');
 
 @include meta.load-css('/node_modules/alertifyjs/build/css/alertify.css');

jsapp/scss/main.scss

@@ -6,7 +6,7 @@
     "node": "^20.18.1 || ^22.4.1"
   },
   "dependencies": {
-    "@fontsource/roboto": "^4.4.2",
+    "@fontsource/roboto": "^4.5.8",
     "@fontsource/roboto-mono": "^4.4.2",
     "@mantine/core": "^7.15.0",
     "@mantine/form": "^7.16.2",