My custom font is not working

[Jarek_P]

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:

1. downloaded woff file from here and put it into /config/www (I’m using this folder for many other stuff)
2. I created in this place 7segment.css file:

@font-face {
	font-family: "7-segment";
	src: url(/local/7segment.woff) format('woff');
}

3. 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();

4. In the Configuration / Dashboards / Resources I have added as follow:
   

5. 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???

[tom_l]

Try using this file (it is a 7 segment font) and these instructions:

Use TTF in Lovelace

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…

[Jarek_P]

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]

Yeah I thought it looked familiar I did have trouble initially with another font file. That linked file run though the linked converter worked.

[Jarek_P]

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

[Jarek_P]

@tom_l

I did have trouble initially with another font file

… ok. But this file used by you is not available yet on this page. Will try to look for it.

[tom_l]

Oh damn. 404.

Here’s mine, already converted: djbgetdigital.woff2 (7.0 KB)

[Jarek_P]

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]

Could have been a cache thing.

[Jarek_P]

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

[Richi_Bowzer]

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.