diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
index ea4e211101..f461af7b86 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/canvas-view.service.ts
@@ -17,6 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import * as d3 from 'd3';
+import * as WebFont from 'webfontloader';
 import { Store } from '@ngrx/store';
 import { CanvasState } from '../state';
 import { refreshBirdseyeView, transformComplete } from '../state/transform/transform.actions';
@@ -66,6 +67,23 @@ export class CanvasView {
     ) {}
 
     public init(svg: any, canvas: any): void {
+        WebFont.load({
+            custom: {
+                families: ['Roboto', 'flowfont', 'FontAwesome']
+            },
+            active: function () {
+                // re-render once the fonts have loaded, without the fonts
+                // positions of elements on the canvas may be incorrect
+                self.processorManager.render();
+                self.processGroupManager.render();
+                self.remoteProcessGroupManager.render();
+                self.portManager.render();
+                self.labelManager.render();
+                self.funnelManager.render();
+                self.connectionManager.render();
+            }
+        });
+
         this.svg = svg;
         this.canvas = canvas;
 
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
index 55a9236aa9..32258dbf20 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
@@ -254,7 +254,7 @@ export class ProcessGroupManager {
                         .append('text')
                         .attr('x', 10)
                         .attr('y', 49)
-                        .attr('class', 'process-group-transmitting process-group-contents-icon')
+                        .attr('class', 'process-group-transmitting process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf140')
                         .append('title')
@@ -270,7 +270,7 @@ export class ProcessGroupManager {
                     details
                         .append('text')
                         .attr('y', 49)
-                        .attr('class', 'process-group-not-transmitting process-group-contents-icon')
+                        .attr('class', 'process-group-not-transmitting process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'flowfont')
                         .text('\ue80a')
                         .append('title')
@@ -286,7 +286,7 @@ export class ProcessGroupManager {
                     details
                         .append('text')
                         .attr('y', 49)
-                        .attr('class', 'process-group-running process-group-contents-icon')
+                        .attr('class', 'process-group-running process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf04b')
                         .append('title')
@@ -302,7 +302,7 @@ export class ProcessGroupManager {
                     details
                         .append('text')
                         .attr('y', 49)
-                        .attr('class', 'process-group-stopped process-group-contents-icon')
+                        .attr('class', 'process-group-stopped process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf04d')
                         .append('title')
@@ -318,7 +318,7 @@ export class ProcessGroupManager {
                     details
                         .append('text')
                         .attr('y', 49)
-                        .attr('class', 'process-group-invalid process-group-contents-icon')
+                        .attr('class', 'process-group-invalid process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf071')
                         .append('title')
@@ -334,7 +334,7 @@ export class ProcessGroupManager {
                     details
                         .append('text')
                         .attr('y', 49)
-                        .attr('class', 'process-group-disabled process-group-contents-icon')
+                        .attr('class', 'process-group-disabled process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'flowfont')
                         .text('\ue802')
                         .append('title')
@@ -353,7 +353,7 @@ export class ProcessGroupManager {
                         .attr('y', function () {
                             return processGroupData.dimensions.height - 7;
                         })
-                        .attr('class', 'process-group-up-to-date process-group-contents-icon')
+                        .attr('class', 'process-group-up-to-date process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf00c')
                         .append('title')
@@ -373,7 +373,7 @@ export class ProcessGroupManager {
                         .attr('y', function () {
                             return processGroupData.dimensions.height - 7;
                         })
-                        .attr('class', 'process-group-locally-modified process-group-contents-icon')
+                        .attr('class', 'process-group-locally-modified process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf069')
                         .append('title')
@@ -393,7 +393,7 @@ export class ProcessGroupManager {
                         .attr('y', function () {
                             return processGroupData.dimensions.height - 7;
                         })
-                        .attr('class', 'process-group-stale process-group-contents-icon')
+                        .attr('class', 'process-group-stale process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf0aa')
                         .append('title')
@@ -413,7 +413,7 @@ export class ProcessGroupManager {
                         .attr('y', function () {
                             return processGroupData.dimensions.height - 7;
                         })
-                        .attr('class', 'process-group-locally-modified-and-stale process-group-contents-icon')
+                        .attr('class', 'process-group-locally-modified-and-stale process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf06a')
                         .append('title')
@@ -433,7 +433,7 @@ export class ProcessGroupManager {
                         .attr('y', function () {
                             return processGroupData.dimensions.height - 7;
                         })
-                        .attr('class', 'process-group-sync-failure process-group-contents-icon')
+                        .attr('class', 'process-group-sync-failure process-group-contents-icon primary-color-lighter')
                         .attr('font-family', 'FontAwesome')
                         .text('\uf128')
                         .append('title')
@@ -736,7 +736,7 @@ export class ProcessGroupManager {
                     .classed('success-color', function (d: any) {
                         return d.permissions.canRead && d.activeRemotePortCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.activeRemotePortCount === 0;
                     });
                 const transmittingCount = details
@@ -760,7 +760,7 @@ export class ProcessGroupManager {
                     .classed('not-transmitting surface-color', function (d: any) {
                         return d.permissions.canRead && d.inactiveRemotePortCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.inactiveRemotePortCount === 0;
                     })
                     .attr('x', function () {
@@ -792,7 +792,7 @@ export class ProcessGroupManager {
                     .classed('success-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.runningCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.runningCount === 0;
                     })
                     .attr('x', function () {
@@ -824,7 +824,7 @@ export class ProcessGroupManager {
                     .classed('warn-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.stoppedCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.stoppedCount === 0;
                     })
                     .attr('x', function () {
@@ -856,7 +856,7 @@ export class ProcessGroupManager {
                     .classed('invalid caution-color', function (d: any) {
                         return d.permissions.canRead && d.component.invalidCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.invalidCount === 0;
                     })
                     .attr('x', function () {
@@ -888,7 +888,7 @@ export class ProcessGroupManager {
                     .classed('disabled surface-color', function (d: any) {
                         return d.permissions.canRead && d.component.disabledCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.disabledCount === 0;
                     })
                     .attr('x', function () {
@@ -920,7 +920,7 @@ export class ProcessGroupManager {
                     .classed('success-color', function (d: any) {
                         return d.permissions.canRead && d.component.upToDateCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.upToDateCount === 0;
                     });
                 const upToDateCount = details
@@ -944,7 +944,7 @@ export class ProcessGroupManager {
                     .classed('surface-color', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedCount === 0;
                     })
                     .attr('x', function () {
@@ -976,7 +976,7 @@ export class ProcessGroupManager {
                     .classed('warn-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.staleCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.staleCount === 0;
                     })
                     .attr('x', function () {
@@ -1008,7 +1008,7 @@ export class ProcessGroupManager {
                     .classed('warn-color-lighter', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.locallyModifiedAndStaleCount === 0;
                     })
                     .attr('x', function () {
@@ -1042,7 +1042,7 @@ export class ProcessGroupManager {
                     .classed('surface-color', function (d: any) {
                         return d.permissions.canRead && d.component.syncFailureCount > 0;
                     })
-                    .classed('zero primary-color-lighter', function (d: any) {
+                    .classed('zero', function (d: any) {
                         return d.permissions.canRead && d.component.syncFailureCount === 0;
                     })
                     .attr('x', function () {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 1c77e599db..f471c88d41 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -121,7 +121,7 @@
         }
 
         g.component rect.body.unauthorized {
-            fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
+            fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
         }
 
         g.component rect.border,
@@ -143,7 +143,7 @@
         }
 
         g.component rect.processor-icon-container.unauthorized {
-            fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
+            fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
         }
 
         g.component.selected rect.border {
@@ -271,7 +271,7 @@
         }
 
         g.connection rect.body.unauthorized {
-            fill: rgba($nifi-theme-surface-palette-default, if($is-dark, 0.97, 0.08));
+            fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
         }
 
         g.connection rect.border.unauthorized {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
index 83632d8795..04d80bd313 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package-lock.json
@@ -32,6 +32,7 @@
                 "ngx-skeleton-loader": "^8.1.0",
                 "rxjs": "~7.8.1",
                 "tslib": "^2.6.2",
+                "webfontloader": "^1.6.28",
                 "zone.js": "0.14.4"
             },
             "devDependencies": {
@@ -57,6 +58,7 @@
                 "@types/d3": "^7.4.3",
                 "@types/humanize-duration": "^3.27.3",
                 "@types/jest": "^29.5.12",
+                "@types/webfontloader": "^1.6.38",
                 "@typescript-eslint/eslint-plugin": "6.21.0",
                 "@typescript-eslint/parser": "6.21.0",
                 "autoprefixer": "^10.4.16",
@@ -11043,6 +11045,12 @@
             "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
             "dev": true
         },
+        "node_modules/@types/webfontloader": {
+            "version": "1.6.38",
+            "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.38.tgz",
+            "integrity": "sha512-kUaF72Fv202suFx6yBrwXqeVRMx7hGtJTesyESZgn9sEPCUeDXm2p0SiyS1MTqW74nQP4p7JyrOCwZ7pNFns4w==",
+            "dev": true
+        },
         "node_modules/@types/ws": {
             "version": "8.5.10",
             "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -25020,6 +25028,11 @@
                 "defaults": "^1.0.3"
             }
         },
+        "node_modules/webfontloader": {
+            "version": "1.6.28",
+            "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+            "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
+        },
         "node_modules/webidl-conversions": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
index 3eb979a193..316d8aa5ea 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
@@ -38,6 +38,7 @@
         "ngx-skeleton-loader": "^8.1.0",
         "rxjs": "~7.8.1",
         "tslib": "^2.6.2",
+        "webfontloader": "^1.6.28",
         "zone.js": "0.14.4"
     },
     "devDependencies": {
@@ -63,6 +64,7 @@
         "@types/d3": "^7.4.3",
         "@types/humanize-duration": "^3.27.3",
         "@types/jest": "^29.5.12",
+        "@types/webfontloader": "^1.6.38",
         "@typescript-eslint/eslint-plugin": "6.21.0",
         "@typescript-eslint/parser": "6.21.0",
         "autoprefixer": "^10.4.16",