diff --git a/src/ui/src/components/visualizer/common/visualizer_config.ts b/src/ui/src/components/visualizer/common/visualizer_config.ts
index b5e02028..9daab5b0 100644
--- a/src/ui/src/components/visualizer/common/visualizer_config.ts
+++ b/src/ui/src/components/visualizer/common/visualizer_config.ts
@@ -44,6 +44,7 @@ export const CONFIG_KEYS_CAN_RERENDER = new Set<string>([
   'hideEmptyNodeDataEntries',
   'showSidePanelOnNodeSelection',
   'maxEdgeLabelCharCount',
+  'svgTextRenderer',
 ]);
 
 /**
diff --git a/src/ui/src/components/visualizer/svg_text_renderer_service.ts b/src/ui/src/components/visualizer/svg_text_renderer_service.ts
index 6490d66a..fca80230 100644
--- a/src/ui/src/components/visualizer/svg_text_renderer_service.ts
+++ b/src/ui/src/components/visualizer/svg_text_renderer_service.ts
@@ -102,7 +102,8 @@ export class SvgTextRendererService {
       .attr('y', (d) => this.getNodeLabelY(d))
       .style('fill', (d) => this.getNodeLabelColor(d))
       .style('font-size', (d) => this.getNodeLabelFontSize(d))
-      .style('font-weight', (d) => (isOpNode(d) ? 400 : 500));
+      .style('font-weight', (d) => (isOpNode(d) ? 400 : 500))
+      .style('font-family', '"Google Sans Text", Arial, Helvetica, sans-serif');
     // Render multi-line text labels using tspans.
     nodeLabelEnter.each((d, i, nodes) => {
       const textElement = d3.select(nodes[i]);
@@ -234,7 +235,11 @@ export class SvgTextRendererService {
       for (const row of rows) {
         const textElement = nodeAttrsTable
           .append('text')
-          .style('font-size', attrsTableFontSize);
+          .style('font-size', attrsTableFontSize)
+          .style(
+            'font-family',
+            '"Google Sans Text", Arial, Helvetica, sans-serif',
+          );
 
         // Key Label
         const keyLabel = row.keyLabelData;
diff --git a/src/ui/src/components/visualizer/webgl_renderer.scss b/src/ui/src/components/visualizer/webgl_renderer.scss
index 825d155b..efb21f16 100644
--- a/src/ui/src/components/visualizer/webgl_renderer.scss
+++ b/src/ui/src/components/visualizer/webgl_renderer.scss
@@ -30,6 +30,16 @@
     box-sizing: border-box;
   }
 
+  svg.svg-texts {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    user-select: none;
+  }
+
   canvas.snapshot,
   canvas.download-png {
     position: absolute;
diff --git a/src/ui/src/components/visualizer/webgl_renderer.ts b/src/ui/src/components/visualizer/webgl_renderer.ts
index 810df417..949be62b 100644
--- a/src/ui/src/components/visualizer/webgl_renderer.ts
+++ b/src/ui/src/components/visualizer/webgl_renderer.ts
@@ -926,6 +926,7 @@ export class WebglRenderer implements OnInit, OnChanges, OnDestroy {
       20,
     );
     this.webglRendererThreejsService.setupThreeJs();
+    this.svgTextRendererService.init(this);
 
     // Run outside Angular to not trigger change detection.
     this.ngZone.runOutsideAngular(() => {
diff --git a/src/ui/src/components/visualizer/webgl_renderer_attrs_table_service.ts b/src/ui/src/components/visualizer/webgl_renderer_attrs_table_service.ts
index bd20a5ea..78bb432f 100644
--- a/src/ui/src/components/visualizer/webgl_renderer_attrs_table_service.ts
+++ b/src/ui/src/components/visualizer/webgl_renderer_attrs_table_service.ts
@@ -78,7 +78,7 @@ export class WebglRendererAttrsTableService {
   private readonly visualizerThemeService: VisualizerThemeService = inject(
     VisualizerThemeService,
   );
-  private readonly attrsTableBgs = new WebglRoundedRectangles(
+  readonly attrsTableBgs = new WebglRoundedRectangles(
     4,
     this.visualizerThemeService,
   );