I need a “7-segment” font in my card. I read a lot, how to configure, but still can’t win this fight, please help
What I did:
downloaded woff file from here and put it into /config/www (I’m using this folder for many other stuff)
I created in this place 7segment.css file:
@font-face {
font-family: "7-segment";
src: url(/local/7segment.woff) format('woff');
}
still in the same place I created also loadfonts.js file:
function loadcss() {
let css = '/local/7segment.css?v=0.005'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
In the Configuration / Dashboards / Resources I have added as follow:
Then I tried to use new font in my card:
- type: state-label
entity: sensor.dryer_time_display
style:
color: '#8df427'
font-family: 7-segment
font-size: 50px
left: 95%
top: 74%
transform: translate(-100%,-50%)
Result: something like Arial font:
same font I have after changing font-family to “7segment” (equal to css filename), after changing to any fake name, font looks a bit different:
so something is working but font which I’m getting is definitely not this expected. Why???
1 Like
tom_l
April 4, 2022, 7:25am
2
Try using this file (it is a 7 segment font) and these instructions:
Download the ttf font from here: https://www.dafont.com/djb-get-digital.font
Convert it to a woff2 font here: online converter
Put the created djbgetdigital.woff2 file in config/www NOTE: the file-name needs to be all lowercase.
Create the following two files in config/www
fonts.css
@font-face {
font-family: "DJBGetDigital";
src: url(/local/djbgetdigital.woff2) format('woff2');
}
loadfonts.js
function loadcss() {
let css = '/local/fonts.css?v=0.005'
let link = docum…
I used exactly this instruction, only woff file I have already prepared from other place. But ok, I’ll try to use this one.
tom_l
April 4, 2022, 7:40am
4
Yeah I thought it looked familiar I did have trouble initially with another font file. That linked file run though the linked converter worked.
So I did it, this font from the link is not available now, so I downloaded other 7-segment font, converted it to woff2, modified my css file:
@font-face {
font-family: "7-segment";
src: url(/local/7segments.woff2) format('woff2');
}
all the rest is exactly the same. And unfortunately result is also the same
… ok. But this file used by you is not available yet on this page. Will try to look for it.
tom_l
April 4, 2022, 8:07am
7
Oh damn. 404.
Here’s mine, already converted: djbgetdigital.woff2 (7.0 KB)
2 Likes
And it just started to work. Unbelievable, but true I checked this my file before by any online font viewer and it was seemed to be ok. High technology is often like magic, don’t try to understand, just use correct spell.
tom_l
April 4, 2022, 8:45am
9
Could have been a cache thing.
Every time I made a flush the cache in my web browser. Maybe rather bad format or version of woff file(before I downloaded woff from the page)?
But doesn’t matter, works! Thank you for help
1 Like
so I followed this and tried it out and font does not show for me at all, tried my own converted font, tried your downloaded one @tom_l still no joy.