Eigene Schriftarten im Lovelace verwenden

Philips Hue White & Col. Amb. Surimu Panel 60x60cm, 929002966401, Weiß

273,90 €

Bei Amazon ansehen *

In einer custom:button-card (Tankerkarte) möchten wir eine eigene Schriftart verwendet.

Wie man diese hinzufügen kann erfahren wir hier.

• Als erstes müsst ihr euch eure gewünschte Font downloaden. Dazu gibt es diverse Möglichkeiten!
• Anschließend muss die Font (meist in ttf-Format) umgewandelt werden in ein woff2-Format. Das geht am besten mit einem online-Converter: fontconverter.io
• Datei downloaden und in config/www ablegen
• Jetzt müssen noch zwei weitere Dateien in config/www angelegt werden:

fonts.css

@font-face {
  font-family: "digital-7";
  src: url(/local/digital-7.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();

• Zum Schluss müssen wir nur noch die loadfonts.js zu unseren Ressourcen hinzufügen.
  • Einstellungen –> Dashboards –> Ressourcen –> Ressource hinzufügen

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

• Jetzt löschen wir den Browser-Cache und können die neue Font verwenden.

      type: custom:button-card
      name: |
        [[[
          var b = states['sensor.tankerkoenig_shop_chill_diesel'].attributes.is_open;
          if (b = 'false' ) return '0,00';
          else return ` ${states['sensor.tankerkoenig_shop_chill_diesel'].state}`
        ]]]
      styles:
        card:
          - font-family: digital-7
          - color: yellow
          - font-size: 40px