[Bug]: Invalid CSS syntax in chat node/widget causes font fallback to Times New Roman

[modojaba]

Bug Description

In the Chat Node:

The CSS font-family declaration for the chat node/widget appears to be syntactically invalid, which causes the browser to ignore the entire font stack and render the content using the default serif font (usually Times New Roman).

The issue is that the entire font-family list is wrapped in parentheses.

Incorrect CSS Code (Observed in element styles):

font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);

Proposed Fix

The parentheses must be removed, as they are invalid syntax for a CSS font-family property. The correct CSS should be:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

To Reproduce

Open Hosted Chat page

Expected behavior

The font should be rendered using the system font stack provided.

Debug Info

N/A

Operating System

N/A

n8n Version

2.0.2

Node.js Version

22

Database

PostgreSQL

Execution mode

queue

Hosting

self hosted

[n8n-assistant]

Hey @modojaba,

Thank you for reaching out! We’ve received your issue and are looking into it. To help us track this internally, we’ve created a Linear ticket with the reference: "GHC-5940".

We’ll keep you updated as we make progress, but if you have any additional details or context to share, feel free to add them here - it’s always helpful!

Thanks for your patience and for bringing this to our attention.

---

For INTERNAL use only: GHC-5940