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" tru…

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-fam…

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…

[image] 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

I did explored your flow. The difference is as I said: [image] hotNipi: serve the font file from node-red static folder Not from C:\Users\jgre...

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 …

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

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

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 …

[image] 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]

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 …

Adding external fonts to dashboard

Dashboard

Steve-Mcl 18 September 2021 16:08 8

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

Topic		Replies	Views
Adding a new font as ttf file Dashboard node-red-dashboard , function-node	12	537	22 July 2023
Want to add the new font Dashboard	3	1862	2 April 2021
Template node - color - font Dashboard	4	3981	26 October 2019
How to use custom font in ui-text? FlowFuse dashboard-2	7	192	31 July 2024
Color ui_text node in dashboard Dashboard	2	528	5 September 2019

Adding external fonts to dashboard

Related topics