Adding external fonts to dashboard

Hello, I am trying to use an external font for the ui_text object on the dashboard. I have researched and tried many options and have not found a working solution. This has led me to two thoughts.

  1. Where can I find what fonts are available by default? Is there a font similar to "Seven Segment" truetype? I was hoping that I would have access to all installed windows fonts since I am on a Windows 10 machine but that doesn't appear to be the case.

  2. I have attached my example with a ui_text object that displays a random number. I am then using a ui_template node to try to format the ui_text object. I have tried multiple fonts including .ttf and .woff/.woff2: DJB Get Digital, Seven Segment, DSEG7. I can use all of the fonts in other applications such as paint, but I can't seem to use it in node-red. I have also tried using "/" and "" for the url path.

Could someone help me? Thanks in advance.

[
    {
        "id": "9dd0cf98c25d33f7",
        "type": "ui_text",
        "z": "13361d1ad7845d6a",
        "group": "329369c6cf655092",
        "order": 14,
        "width": 0,
        "height": 0,
        "name": "Text",
        "label": "text",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "x": 790,
        "y": 1000,
        "wires": []
    },
    {
        "id": "4846a284f9d3fcf9",
        "type": "inject",
        "z": "13361d1ad7845d6a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "2",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 470,
        "y": 1000,
        "wires": [
            [
                "99d51959a3f9e9f5"
            ]
        ]
    },
    {
        "id": "99d51959a3f9e9f5",
        "type": "random",
        "z": "13361d1ad7845d6a",
        "name": "",
        "low": 1,
        "high": 10,
        "inte": "true",
        "property": "payload",
        "x": 620,
        "y": 1000,
        "wires": [
            [
                "9dd0cf98c25d33f7"
            ]
        ]
    },
    {
        "id": "e0345138157eec04",
        "type": "ui_template",
        "z": "13361d1ad7845d6a",
        "group": "2c7dae1f6bb805ee",
        "name": "",
        "order": 15,
        "width": 0,
        "height": 0,
        "format": "<style>\n\n    @font-face {\n        font-family: segment;\n        src: url('C:\\Users\\jgreenmt\\Documents\\myfonts\\7 Segment.ttf') format('truetype');\n    }\n    \n    .nr-dashboard-text .value {\n        color: red !important;\n        font-family: segment !important;\n    }\n\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "x": 380,
        "y": 1120,
        "wires": [
            []
        ]
    },
    {
        "id": "329369c6cf655092",
        "type": "ui_group",
        "name": "Default",
        "tab": "2099d5e8e5a605ea",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "2c7dae1f6bb805ee",
        "type": "ui_group",
        "name": "ATL Dewpoint",
        "tab": "50d7e24e32bf7295",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "2099d5e8e5a605ea",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "50d7e24e32bf7295",
        "type": "ui_tab",
        "name": "ATL",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Browsers tend to deny to use local resources like fonts. But you can serve the font file from node-red static folder and then use it where you like.

<style id="dashboard-style">
@font-face {
    font-family: MyDashboardFont;
    src:url("/fonts/Sitka.ttc");
}

body.nr-dashboard-theme {
    font-family: MyDashboardFont;
}
</style>

Thank you for the response. If you look at the flow I posted you will see that I configured a ui_template node with almost exactly the same code you have posted. I have seen this example pop up many times during my research but for some reason it doesn't work for me. Could you take a look at my flow and see if anything appears off? If not, is there an obvious step or something that I'm missing?

Thanks.

You will need to serve this as it won't load from a file source. You can serve the font with an endpoint or enable a public folder in settings.js

I did explored your flow. The difference is as I said:

Not from C:\Users\jgre...

I read and responded from my phone's email while traveling and overlooked that detail. My apologies.

I have created a folder called "nodeFonts" located at '\Users\jgreenmt\nodeFonts' and I have used this file path in settings.js (httpStatic: '\Users\jgreenmt\nodeFonts')

It is still not displaying the font. Could you walk me through how to serve the font?

Can anyone help me with instructions on how to serve the font?

One way of serving files to the browser without modifying settings.js

Http in --> file node --> http response

The file node would read the file(s) and serve them.

Example flow...
https://flows.nodered.org/flow/db68bd4934cf46f39e6e453a348bc419