My custom font is not working

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 :slight_smile:
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');
}

  1. 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();
  1. In the Configuration / Dashboards / Resources I have added as follow:
    image

  2. 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:

image

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:

image

so something is working but font which I’m getting is definitely not this expected. Why???

1 Like

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

I used exactly this instruction, only woff file I have already prepared from other place. But ok, I’ll try to use this one.

Yeah I thought it looked familiar :slightly_smiling_face: 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 :frowning:

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

Oh damn. 404.

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

2 Likes

And it just started to work. Unbelievable, but true :slight_smile: 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.

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 :slight_smile:

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.