Hi all
just a question.
how can I use a font family in a widget?
I want to use the DSEG fonts from https://www.keshikan.net/fonts-e.html which I stored in static
Maybe somebody have a simple example for me?
I wanr to use this for a widget for gas station prices
Thanks in advance
BR Uwe
You will have to use a stylesheet property in the widget somewhere above where you want to be able to use the font. In the stylesheet you can use the CSS @font-face rule to import the font:
Note, that this will only work because you have placed the font in your html folder. Security rules of the UI will prevent any attempt to load a font from some external source.
In this case the following is probably sufficient:
- component: SOMECOMPONENTHERE
config:
stylesheet: >
@font-face {
font-family: dseg;
src: url(/static/FONTFILE);
}
...rest of config
Then just set the font style to dseg wherever youād like to use it.
Hi Justin
thanks for this, this solved my problem
I use the tankerkƶnig-Bindung to get the gasoline prices and create the items as follow
for gasoline type E5 = gasolinestationname_E5
for gasoline type E10 = gasolinestationname_E10
for Diesel = gasolinestationname_Diesel
and for open/closed = gasolinestationname_GeoffnetGeschlossen
Only one missing point is, I cannot open the analyze page
and here is the widget
uid: Bailey_tankstelle_V2
tags: []
props:
parameters:
- description: A gasoline station (Tankerkoenig)
label: Tankstelle
name: tankstelle
required: true
type: TEXT
- description: gasoline station Name
label: Tankstellenname
name: tankstellenname
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 2, 2026, 3:34:23 PM
component: f7-card
config:
stylesheet: >
@font-face {
font-family: dseg;
src: url(/static/fonts/DSEG7Classic-BoldItalic.woff2);
}
style:
background: "#2b2b2b"
border-radius: 12px
padding: 16px
width: 95px
slots:
default:
- component: f7-row
config:
action: analyzer
actionAnalyzerItems: =[props.tankstelle+"_E10", props.tankstelle+"_E5"]
style:
justify-content: space-between
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
action: analyzer
actionAnalyzerItems: =[props.tankstelle+"_E10", props.tankstelle+"_E5"]
font-size: 20px
style:
background: "linear-gradient(180deg, #3a3a3a, #1f1f1f)"
border: "3px solid #c49a2c"
border-radius: 8px
box-shadow: 0 0 10px rgba(196,154,44,0.6), inset 0 0 6px rgba(0,0,0,0.8)
color: "#ffffff"
display: block
font-weight: bold
margin-bottom: 14px
padding: 10px 16px
text-align: center
text: = props.tankstellenname
- component: Label
config:
style:
color: white
text: E5
- component: f7-row
slots:
default:
- component: Label
config:
action: analyzer
actionAnalyzerItems: =[props.tankstelle+"_E10", props.tankstelle+"_E5"]
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 32px
text: =(Math.floor(Number(items[props.tankstelle+"_E5"].state)*100)/100).toFixed(2)
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 18px
transform: translateY(-8px)
text: ā¹
- component: f7-row
config:
style:
justify-content: space-between
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: white
text: E10
- component: f7-row
slots:
default:
- component: Label
config:
action: analyzer
actionAnalyzerItems: =[props.tankstelle+"_E10", props.tankstelle+"_E5"]
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 32px
text: =(Math.floor(Number(items[props.tankstelle+"_E10"].state)*100)/100).toFixed(2)
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 18px
transform: translateY(-8px)
text: ā¹
- component: f7-row
config:
style:
justify-content: space-between
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: white
text: Diesel
- component: f7-row
slots:
default:
- component: Label
config:
action: analyzer
actionAnalyzerItems: =[props.tankstelle+"_E10", props.tankstelle+"_Diesel"]
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 32px
text: =(Math.floor(Number(items[props.tankstelle+"_Diesel"].state)*100)/100).toFixed(2)
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 18px
transform: translateY(-8px)
text: ā¹
- component: f7-row
config:
style:
justify-content: space-between
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: white
- component: f7-row
slots:
default:
- component: Label
config:
style:
color: "#c49a2c"
display: block
font-size: 26px
text-align: center
text: =items[props.tankstelle+"_GeoffnetGeschlossen"].state
The actions set of properties are not universal. They can only be applied to certain oh- components (oh-link, oh-button, oh-icon, and oh-card are the main ones, but the component reference doc page will show if any particular component has actions or not). They do not work with any f7- components and they do not work with the Label or Content components. All of your actions are currently configured in f7- or Label components, so none of those actions will work.
If you change your labels to oh-links (or just wrap your labels in oh-links) then you can apply the analyzer action to the links and that will work.
Maybe this is a stupid question, but how I hav to wrap for example the below code with ou-links?
default:
- component: Label
config:
style:
color: white
text: E5
- component: f7-row
slots:
default:
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 32px
text: =Math.floor(Number(items[props.gasstation+"_E5"].state)*100)/100
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 18px
transform: translateY(-8px)
text: ā¹
In this case āwrapā just means put something inside (as a child of) the oh-link. So, if you have a label you want to assign an action to like this:
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 32px
text: =Math.floor(Number(items[props.gasstation+"_E5"].state)*100)/100
Then you just put all of that in the default slot of the link:
- component: oh-link
config:
action: analyzer
...rest of link config
slots:
default:
- component: Label
config:
style:
color: "#c49a2c"
font-family: dseg, monospace
font-size: 32px
text: =Math.floor(Number(items[props.gasstation+"_E5"].state)*100)/100
Hi Justin
thanks for the answer. I will try to implement this into the widget
BR Uwe