[NIFI-13852] replace Roboto font with Inter font (#9360)

* [NIFI-13852] replace Roboto font with Inter font

* add Inter to WebFont load callback

This closes #9360

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts

@@ -69,7 +69,7 @@ export class CanvasView {
     public init(svg: any, canvas: any): void {
         WebFont.load({
             custom: {
-                families: ['Roboto', 'flowfont', 'FontAwesome']
+                families: ['Inter', 'flowfont', 'FontAwesome']
             },
             active: function () {
                 // re-render once the fonts have loaded, without the fonts

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss

@@ -18,9 +18,16 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@use '@fontsource/roboto/latin.css' as roboto-normal;
-@use '@fontsource/roboto/latin-300-italic.css' as roboto-light-italic;
-@use '@fontsource/roboto/latin-400-italic.css' as roboto-normal-italic;
+@use '@fontsource/inter' as inter-normal;
+@use '@fontsource/inter/400.css' as inter-400;
+@use '@fontsource/inter/400-italic.css' as inter-italic;
+
+@layer base {
+    //fonts are loaded by the browser
+    @font-face {
+        font-family: 'Inter';
+    }
+}
 
 $primary: (
     0: #000000,
@@ -222,8 +229,8 @@ $m3-dark-theme: mat.define-theme(
             tertiary: $_dark-theme-tertiary
         ),
         typography: (
-            plain-family: Roboto,
-            brand-family: Roboto,
+            plain-family: Inter,
+            brand-family: Inter,
             bold-weight: 700,
             regular-weight: 400
         ),
@@ -251,8 +258,8 @@ $m3-light-theme: mat.define-theme(
             tertiary: $_light-theme-tertiary
         ),
         typography: (
-            plain-family: Roboto,
-            brand-family: Roboto,
+            plain-family: Inter,
+            brand-family: Inter,
             bold-weight: 700,
             regular-weight: 400
         ),

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss

@@ -18,6 +18,13 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
+@layer base {
+    //fonts are loaded by the browser
+    @font-face {
+        font-family: Comic Sans MS;
+    }
+}
+
 $m3-material-primary-light-palette: (
     primary: (
         0: #000000,

nifi-frontend/src/main/frontend/libs/shared/tailwind.theme.json

@@ -1,8 +1,5 @@
 {
     "extend": {
-        "fontFamily": {
-            "roboto": ["Roboto"]
-        },
         "fontSize": {
             "xs": [
                 "10px",

nifi-frontend/src/main/frontend/package.json

@@ -26,7 +26,7 @@
         "@angular/platform-browser-dynamic": "18.2.4",
         "@angular/router": "18.2.4",
         "@ctrl/ngx-codemirror": "^7.0.0",
-        "@fontsource/roboto": "^5.0.12",
+        "@fontsource/inter": "^5.1.0",
         "@ngrx/effects": "18.0.2",
         "@ngrx/operators": "18.0.2",
         "@ngrx/router-store": "18.0.2",