# How to use custom font in ui-text?

**URL:** https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867
**Category:** FlowFuse
**Tags:** dashboard-2
**Created:** [30 July 2024 05:25 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867 "2024-07-30T05:25:25Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![54jinyistudio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/54jinyistudio/32/81424_2.png) [@54jinyistudio](https://discourse.nodered.org/u/54jinyistudio)
#### Post date: [30 July 2024 05:25 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/1 "2024-07-30T05:25:25Z")

</div>

I need to define a font in ui-template first. But I don't know how to reference the new font to a used ui-text.

```auto
<style>
    @font-face {
        font-family:segment;
        src:url "(http://127.0.0.1:1890/switch/assets/Seven_Segment.ttf)";
    }
</style>

```

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [30 July 2024 07:16 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/2 "2024-07-30T07:16:11Z")

</div>

We have an example for overriding font in our [docs](https://dashboard.flowfuse.com/user/template-examples.html#font). You are better off declaring this in a UI Template that is of type "CSS (UI Scoped). Then no need for the `<style>` tags.

You should then be able to reference "Segment" in a second CSS declaration. There is an example in the [docs](https://dashboard.flowfuse.com/user/template-examples.html#font)

---

<div class="post-metadata">

### Author: ![54jinyistudio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/54jinyistudio/32/81424_2.png) [@54jinyistudio](https://discourse.nodered.org/u/54jinyistudio)
#### Post date: [30 July 2024 07:43 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/3 "2024-07-30T07:43:55Z")

</div>

I make this in a ui-template but **ui-text font isn't change**!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/acabf3f300a595622dfeda226aaafcf4a2f2844e.png)

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [30 July 2024 07:51 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/4 "2024-07-30T07:51:33Z")

</div>

You've got a typo in the `font-face` declaration. The `"` should be around the URL, but _not_ the `( )`

---

<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: [30 July 2024 07:53 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/5 "2024-07-30T07:53:43Z")

</div>

`.nrdb-ui-text` sets the font-family to Helvetica. Can't see any good reason doin so but if user wants to change whole page, the ui\_text is the thing to adjust separately.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/9758024e0baeac0742f7069e5a8a3bbb2a0e173c.png)

---

<div class="post-metadata">

### Author: ![54jinyistudio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/54jinyistudio/32/81424_2.png) [@54jinyistudio](https://discourse.nodered.org/u/54jinyistudio)
#### Post date: [30 July 2024 08:07 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/6 "2024-07-30T08:07:50Z")

</div>

> [@hotNipi](#):
>
> .nrdb-ui-text

Why ui-text's label font not change but group label font have changed  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/6/c600e77321a6a61244490cc25169c2ec13e1f8c6.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: [30 July 2024 09:17 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/7 "2024-07-30T09:17:26Z")

</div>

inspect the dashboard yourself using the browsers devtools and you will find the class for the class for the value part is `.nrdb-ui-text-value`

To further limit the CSS from affecting ALL text nodes, you should add a class to ONLY the ui-text widget you want to have this font (e.g. `seven-seg`) then address it like this:

```auto
.seven-seg .nrdb-ui-text-value {
    font-family: "segment"; 
}

```

---

<div class="post-metadata">

### Author: ![54jinyistudio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/54jinyistudio/32/81424_2.png) [@54jinyistudio](https://discourse.nodered.org/u/54jinyistudio)
#### Post date: [31 July 2024 00:49 UTC](https://discourse.nodered.org/t/how-to-use-custom-font-in-ui-text/89867/8 "2024-07-31T00:49:37Z")

</div>

> [@Steve-Mcl](#):
>
> ```auto
> .seven-seg .nrdb-ui-text-value {
> font-family: "segment"; 
> }
> 
> ```

OK !  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76a718be1ead290f20ba8b4bfa40f1a02d205723.png)