[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

@@ -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) {

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)
 

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

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"

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",