# Adding external fonts to dashboard

**URL:** <https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025>\
**Category:** Dashboard\
**Created:** [14 September 2021 16:01 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025 "2021-09-14T16:01:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [14 September 2021 16:01 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/1 "2021-09-14T16:01:30Z")

</div>

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.

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 September 2021 18:14 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/2 "2021-09-14T18:14:26Z")

</div>

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.

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

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

```

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [14 September 2021 18:32 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/3 "2021-09-14T18:32:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 September 2021 18:36 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/4 "2021-09-14T18:36:29Z")

</div>

> [@jgreenmt](#):
>
> `src: url('C:\\Users\\jgreenmt\\Documents\\myfonts\\7 Segment.ttf')`

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 September 2021 18:37 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/5 "2021-09-14T18:37:22Z")

</div>

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

> [@hotNipi](#):
>
> serve the font file from node-red static folder

Not from `C:\Users\jgre...`

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [15 September 2021 17:09 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/6 "2021-09-15T17:09:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [17 September 2021 20:05 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/7 "2021-09-17T20:05:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 September 2021 16:08 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/8 "2021-09-18T16:08:08Z")

</div>

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](https://flows.nodered.org/flow/db68bd4934cf46f39e6e453a348bc419)

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 18:43 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/9 "2021-09-20T18:43:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 19:46 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/10 "2021-09-20T19:46:48Z")

</div>

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:

```auto
.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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 September 2021 19:52 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/11 "2021-09-20T19:52:58Z")

</div>

> [@jgreenmt](#):
>
> `.nr-dashboard-widget- .value {`

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/117475d789995f390bc7c9398dc4ee040b9edf2e.png)

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 19:57 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/12 "2021-09-20T19:57:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 20:02 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/13 "2021-09-20T20:02:03Z")

</div>

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

![Console](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f742c3fd2455aa7f020088d87eb9035d1b65528.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 September 2021 20:05 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/14 "2021-09-20T20:05:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 September 2021 20:07 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/15 "2021-09-20T20:07:13Z")

</div>

> [@jgreenmt](#):
>
> `font-style: normal;`

Just realised you have font-style.

Bold is set by [`font-weight`](https://www.w3schools.com/cssref/pr_font_weight.asp)

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 20:08 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/16 "2021-09-20T20:08:12Z")

</div>

The code I tried is:

```auto
.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.

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 20:09 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/17 "2021-09-20T20:09:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 September 2021 20:11 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/18 "2021-09-20T20:11:32Z")

</div>

> [@jgreenmt](#):
>
> Can I mark two solutions on one post?

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

---

<div class="post-metadata">

**Author:** ![jgreenmt](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@jgreenmt](https://discourse.nodered.org/u/jgreenmt)\
**Post date:** [20 September 2021 20:13 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/19 "2021-09-20T20:13:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 October 2021 20:14 UTC](https://discourse.nodered.org/t/adding-external-fonts-to-dashboard/51025/20 "2021-10-04T20:14:23Z")

</div>

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