Use TTF in Lovelace

Configuration Frontend
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")}}
    card_mod:
      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.

9 Likes