Adding external fonts to dashboard

jgreenmt · 14 September 2021 16:01

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.

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.
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
    }
]

hotNipi · 14 September 2021 18:14

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>

jgreenmt · 14 September 2021 18:32

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.

Steve-Mcl · 14 September 2021 18:36

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

hotNipi · 14 September 2021 18:37

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

Not from C:\Users\jgre...

jgreenmt · 15 September 2021 17:09

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?

jgreenmt · 17 September 2021 20:05

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

Steve-Mcl · 18 September 2021 16:08

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

jgreenmt · 20 September 2021 18:43

This solved my issue. I added the http in --> file node in --> http response. Thank you for your patience.

jgreenmt · 20 September 2021 19:46

I'm not sure if I should start a new topic but I have another question that pertains to this topic.

I was able to successfully import fonts, however each font I import seems to be defaulted to the bold styling. I have tried adding font-style and font-weight to the end of the @font-face function in my ui_template node but it has no effect.

I've also tried the following in my ui_template:

.nr-dashboard-widget-  .value {
        font-family: digital;
        font-size: 44px;
        font-style: normal;
        color: lime;
    }

There is no difference when using bold or normal as the font style. When I use the font somewhere else (i.e. Paint) There is a difference between normal and bold. The font on my dashboard matches the bold look in Paint. I have tried this for three different fonts and it appears they are all being imported as bold only. Is there a way to get the normal style?

Steve-Mcl · 20 September 2021 19:52

that selector doesnt look right.

A quick way to test your selector is to put it in the console and see if it "selects" any objects e.g...

enter $(".nr-dashboard-widget- .value") in the console & expand the result

jgreenmt · 20 September 2021 19:57

I used "inspect" on the page to get the identifier. It changes the size, color, and font correctly. The reason it looks funky is because usually you would list the label after the - but I listed a space (" ") as the label so the identifier in "Inspect" showed it as a space.

Even if I use a default identifier such as ".nr-dashboard-text .value" I still have the same issue. Also as a side note, using the code I pasted, if I change the font-style to italic, it changes to an italic style correctly.

jgreenmt · 20 September 2021 20:02

Also I entered in the console as you requested and my length is 1.

Console

Steve-Mcl · 20 September 2021 20:05

As a test, can you add !important after the font-weight value, deploy & refresh

Steve-Mcl · 20 September 2021 20:07

Just realised you have font-style.

Bold is set by font-weight

jgreenmt · 20 September 2021 20:08

The code I tried is:

.nr-dashboard-text .value {
        font-family: digital;
        font-size: 44px;
        font-style: normal !important;
        color: lime;
    }

This did not work either after and deploy and refresh the page.

jgreenmt · 20 September 2021 20:09

Ah. Silly mistake. Good catch. Using font-weight worked. Thank you again. Can I mark two solutions on one post?

Steve-Mcl · 20 September 2021 20:11

No - strictly speaking, you should start a new topic.
The first solution answers the original question.

jgreenmt · 20 September 2021 20:13

Ok in the future I will start a new topic. Thanks again for your help.

system · 4 October 2021 20:14

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Adding a new font as ttf file Dashboard node-red-dashboard , function-node	12	461	22 July 2023
Template node - color - font Dashboard	4	3932	26 October 2019
How to use custom font in ui-text? FlowFuse dashboard-2	7	73	31 July 2024
How to force ui_text value to NOT be bold Dashboard node-red-dashboard	3	328	11 November 2022
How to make font bigger and change the color of label Dashboard	8	5834	18 January 2021

Adding external fonts to dashboard

Related topics