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/wwwablegen - Jetzt müssen noch zwei weitere Dateien in
config/wwwangelegt werden:
fonts.css
configuration.yaml
1@font-face {
2 font-family: "digital-7";
3 src: url(/local/digital-7.woff2) format('woff2');
4}loadfonts.js
configuration.yaml
1function loadcss() {
2 let css = '/local/fonts.css?v=0.005'
3
4 let link = document.createElement('link');
5 let head = document.getElementsByTagName('head')[0];
6 let tmp;
7 link.rel = 'stylesheet';
8 link.type = 'text/css';
9
10 tmp = link.cloneNode(true);
11 tmp.href = css;
12 head.appendChild(tmp);
13 console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
14}
15loadcss();- Zum Schluss müssen wir nur noch die
loadfonts.jszu 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.
