How to use custom font in ui-text?

Vendors FlowFuse
1

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.

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

We have an example for overriding font in our docs. 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

1 Like
3

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

image
image856Ă—537 13.5 KB

4

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

5

.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

6

Why ui-text's label font not change but group label font have changed
image

7

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:

.seven-seg .nrdb-ui-text-value {
    font-family: "segment"; 
}
1 Like
8

OK !
image

1 Like