Use TTF in Lovelace

Configuration Frontend
28

But… there’s always a but.

This only works for my duckdns address (outside or inside my local network) visiting home assistant via the ip address on my local network does not render the font.

29

So can you access locally

  • The font file
  • The font css loader

:grey_question:

30

Your browser console is probably complaining about a cross domain violation, with the domain of the font file being different from the ip/domain you’re browsing.

haven’t tested, but you can probably use a relative path to the fonts.css file in the loadfonts.js file, that would fix this. Or if it doesn’t, just duplicate the contents of the .js file and use the two different url’s (changing the variable names off course).

1 Like
31

You can indeed. I used:

let css = '/local/fonts.css?v=0.005'

And this fixed the issue.

Thanks again.

32

Hi!
I’ve been trying to set up seven segment font for one of my custom card following the summary above without success. Is there someone who can describe the steps from import the right font format, config resource in UI to lovelace config.
Thanks!

33

  1. Download the ttf font from here: https://www.dafont.com/djb-get-digital.font

  2. Convert it to a woff2 font here: online converter

  3. Put the created djbgetdigital.woff2 file in config/www NOTE: the file-name needs to be all lowercase.

  4. 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 = 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. Add the following to Settings → Dashboards → ⋮ (top right of page) → Resources

URL: /local/loadfonts.js
ResourceType: JavaScript Module

  1. Reload your browser cache (Ctrl + F5) and use it like this (as an example):
  - type: markdown
    content: |
      {{states("sensor.time")}}
    style: |
      ha-card {
        font-family: "DJBGetDigital"; 
      }

Note: You will require card-mod to be installed to be able to use style:

Note 2: If you have just created the /www folder you need to restart home assistant.

6 Likes
34

Thanks! I’ve will give it another try later this evening.

35

I followed your instruction without any luck. Card-mod is up and running but I can’t change the font. I must have made a simple misstake but I can’t find it?

36

Show your card config.

37

type: markdown
content: |
{{states(“sensor.time”)}}
style: |
ha-card {
font-family: “DJBGetDigital”;
}
title: Test

38

Not sure what you have done:

type: markdown
content: |
  <br>
  {{states("sensor.time")}}
style: |
  ha-card {
    font-family: "DJBGetDigital"; 
    font-size: 84px;
  }

Screenshot_2020-09-16 Administration - Home Assistant

Do you have a sensor.time ?

39

I’m not able to get a screen shot right now but I tried with the code above with correct space etc. I post a screen shot as sone as possible.
/A

40

I get this when I open the wolff2 file:

/config/www/DJBGetDigital.woff2:

‘utf-8’ codec can’t decode byte 0xec in position 19: invalid continuation byte

41

:man_shrugging:
I don’t even have anything that can open woff2 files.

One thing though. This file-name: DJBGetDigital.woff2 should be all lower case. As per step 3:

I’ll edit the step to highlight that.

42

Thanks! Now its up and rundning! :+1::pray:

1 Like
43

Hi,
sorry if i disturb @tom_l
But in HA ver.2020.12.0 dont work to add a font in the style.
Is possible or is my problem :slight_smile:

44

Sorry, no idea. I have not updated from 0.118.

45

Many, thanks…
When you update send me a feedbak :slight_smile:

46

I just updated and my font imports are still working.

47

Ok now work… delete cache in all browser :slight_smile:
Sorry if i disturb.
Many thanks! @tom_l

1 Like