From 0cdee7546048777be6a0b82e039a9b2fd722bae3 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Thu, 1 May 2025 10:19:36 +1000
Subject: [PATCH] [API] Allow canvas font customisation (#987)

Allows customisation of fonts via `LiteGraph` global var:

```ts
LiteGraph.NODE_FONT = "wingdings"
```


![image](https://github.com/user-attachments/assets/36bec38d-ea5f-4ec6-a2a3-bc5a57826c1e)
---
 src/LGraphCanvas.ts                       | 6 +++---
 src/LGraphGroup.ts                        | 2 +-
 src/LGraphNode.ts                         | 4 ++--
 src/LiteGraphGlobal.ts                    | 5 +++++
 test/__snapshots__/litegraph.test.ts.snap | 3 +++
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts
index 7ce26e01b..15cdeec17 100644
--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -338,11 +338,11 @@ export class LGraphCanvas {
    * @deprecated Use {@link LGraphNode.titleFontStyle} instead.
    */
   get title_text_font(): string {
-    return `${LiteGraph.NODE_TEXT_SIZE}px Arial`
+    return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}`
   }
 
   get inner_text_font(): string {
-    return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px Arial`
+    return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
   }
 
   #maximumFrameGap = 0
@@ -4144,7 +4144,7 @@ export class LGraphCanvas {
     ctx.save()
     ctx.translate(x, y)
 
-    ctx.font = "10px Arial"
+    ctx.font = `10px ${LiteGraph.DEFAULT_FONT}`
     ctx.fillStyle = "#888"
     ctx.textAlign = "left"
     if (this.graph) {
diff --git a/src/LGraphGroup.ts b/src/LGraphGroup.ts
index 053525868..762dad00d 100644
--- a/src/LGraphGroup.ts
+++ b/src/LGraphGroup.ts
@@ -200,7 +200,7 @@ export class LGraphGroup implements Positionable, IPinnable, IColorable {
     ctx.fill()
 
     // Title
-    ctx.font = `${font_size}px Arial`
+    ctx.font = `${font_size}px ${LiteGraph.GROUP_FONT}`
     ctx.textAlign = "left"
     ctx.fillText(this.title + (this.pinned ? "📌" : ""), x + padding, y + font_size)
 
diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts
index f1389d5fd..6557ce5ed 100644
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -198,11 +198,11 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    * The font style used to render the node's title text.
    */
   get titleFontStyle(): string {
-    return `${LiteGraph.NODE_TEXT_SIZE}px Arial`
+    return `${LiteGraph.NODE_TEXT_SIZE}px ${LiteGraph.NODE_FONT}`
   }
 
   get innerFontStyle(): string {
-    return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px Arial`
+    return `normal ${LiteGraph.NODE_SUBTEXT_SIZE}px ${LiteGraph.NODE_FONT}`
   }
 
   graph: LGraph | null = null
diff --git a/src/LiteGraphGlobal.ts b/src/LiteGraphGlobal.ts
index c3ba12401..8ad891c60 100644
--- a/src/LiteGraphGlobal.ts
+++ b/src/LiteGraphGlobal.ts
@@ -57,9 +57,14 @@ export class LiteGraphGlobal {
   NODE_DEFAULT_SHAPE = RenderShape.ROUND
   NODE_BOX_OUTLINE_COLOR = "#FFF"
   NODE_ERROR_COLOUR = "#E00"
+  NODE_FONT = "Arial"
+
+  DEFAULT_FONT = "Arial"
   DEFAULT_SHADOW_COLOR = "rgba(0,0,0,0.5)"
+
   DEFAULT_GROUP_FONT = 24
   DEFAULT_GROUP_FONT_SIZE?: any
+  GROUP_FONT = "Arial"
 
   WIDGET_BGCOLOR = "#222"
   WIDGET_OUTLINE_COLOR = "#666"
diff --git a/test/__snapshots__/litegraph.test.ts.snap b/test/__snapshots__/litegraph.test.ts.snap
index ca0dc56f1..97bb5ed40 100644
--- a/test/__snapshots__/litegraph.test.ts.snap
+++ b/test/__snapshots__/litegraph.test.ts.snap
@@ -14,6 +14,7 @@ LiteGraphGlobal {
   "CONNECTING_LINK_COLOR": "#AFA",
   "ContextMenu": [Function],
   "CurveEditor": [Function],
+  "DEFAULT_FONT": "Arial",
   "DEFAULT_GROUP_FONT": 24,
   "DEFAULT_GROUP_FONT_SIZE": undefined,
   "DEFAULT_POSITION": [
@@ -26,6 +27,7 @@ LiteGraphGlobal {
   "EVENT": -1,
   "EVENT_LINK_COLOR": "#A86",
   "GRID_SHAPE": 6,
+  "GROUP_FONT": "Arial",
   "Globals": {},
   "HIDDEN_LINK": -1,
   "INPUT": 1,
@@ -57,6 +59,7 @@ LiteGraphGlobal {
   "NODE_DEFAULT_COLOR": "#333",
   "NODE_DEFAULT_SHAPE": 2,
   "NODE_ERROR_COLOUR": "#E00",
+  "NODE_FONT": "Arial",
   "NODE_MIN_WIDTH": 50,
   "NODE_MODES": [
     "Always",