# Template node - color - font

**URL:** <https://discourse.nodered.org/t/template-node-color-font/17159>\
**Category:** Dashboard\
**Created:** [25 October 2019 21:38 UTC](https://discourse.nodered.org/t/template-node-color-font/17159 "2019-10-25T21:38:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [25 October 2019 21:38 UTC](https://discourse.nodered.org/t/template-node-color-font/17159/1 "2019-10-25T21:38:03Z")

</div>

playing around with the template node i try to create a 7 segment display effect clock  
i found out how to change the size of the text  
but when i try to change color and get the font from external url it wil not show what i want  
still in white and not the correct font

what i have in my template node is

```auto
<style>
body.nr-dashboard-theme {
    font-size: 10px !important;
}
.md-toolbar-tools h1 {
    font-size: 10px !important;
}

@font-face {
font-family:segment;
src: url "(http://127.0.0.1/Seven Segment.ttf)";
}
    
#TAB_GROUP_cards {
    font color: red;
    font-size: 100px !important;
    font-family: "segment";
}
</style>

```

also tried color instead of font color also no effect  
is it possible what i want to do?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [25 October 2019 21:46 UTC](https://discourse.nodered.org/t/template-node-color-font/17159/2 "2019-10-25T21:46:55Z")

</div>

> [@RogierQ](#):
>
> font color: red;

Is that the proper css rule name to change a fonts color?

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [25 October 2019 21:51 UTC](https://discourse.nodered.org/t/template-node-color-font/17159/3 "2019-10-25T21:51:41Z")

</div>

i gues the correct way is

```auto
color: blue;

```

but that is not working

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [25 October 2019 23:22 UTC](https://discourse.nodered.org/t/template-node-color-font/17159/4 "2019-10-25T23:22:11Z")

</div>

It is hard to say what is bad in your flow. It is easier to show a way that works.

```auto
<!DOCTYPE html>

<html>

<head>
    <style>
        @font-face {
            font-family: "segment";
            src: url("/nrfonts/Seven_Segment/7_Segment.ttf") format('woff');
        }

        .sevenseg {
            color: rgba(255, 0, 0, 0.8);
            font-size: 50px;
            font-family: "segment";
        }
    </style>

</head>

<body>
    <span class="sevenseg">88:88</span>
</body>

</html>

```

![7_Segment](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6f1fd4fa0cbdd644cd4a580be3d703877529c2b7.png)

---

<div class="post-metadata">

**Author:** ![RogierQ](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rogierq/32/3211_2.png) [@RogierQ](https://discourse.nodered.org/u/RogierQ)\
**Post date:** [26 October 2019 11:12 UTC](https://discourse.nodered.org/t/template-node-color-font/17159/5 "2019-10-26T11:12:52Z")

</div>

> [@Andrei](#):
>
> @font-face { font-family: "segment"; src: url("/nrfonts/Seven\_Segment/7\_Segment.ttf") format('woff'); } .sevenseg { color: rgba(255, 0, 0, 0.8); font-size: 50px; font-family: "segment"; } 88:88

Very nice! Thank you so much for helping out!