Use TTF in Lovelace

That’s the problem. I could never get it to load.

Truetype fonts don’t seem to be supported, at least not in my browser. No problem with otf and woff files and the stylesheet format that has been posted above.

If you continue to have problems getting just the stylesheet loaded, you can try loading a javascript file instead that in turn injects a stylesheet link in the <head> section of the site.

Example js code for let’s say loadFonts.js:

function loadcss() {
    let css = 'http://hassio.local:8123/local/fonts.css?v=0.001'
    
    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();

I load that js file via a yaml entry in configuration.yaml but I guess adding it through the resources tab in the interface should work too. In configuration.yaml in stead of the lovelace: resources: section, you could also add

extra_module_url: 
    - /local/loadFonts.js

inside the frontend section. This will make the font available outside lovelace too (to style other interface elements).

I also found that that way I can change the .js file, save and just reload the browser window with CTRL+F5 without the need for any restart or core reloading to apply changes.

1 Like

I tried both the configuration.yaml and configuration/resources method. Unfortunately neither worked. I edited the loadfonts.js file because I’m using https,

function loadcss() {
    let css = 'https://my_domain_redacted.duckdns.org/local/fonts.css'
    
    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();

Thought that must be it. But no luck.

In a final effort to get this sorted I’ll list all the details I have,

  1. The above file, loadfonts.js is in config/www
  2. The below file (named fonts.css) is in config/www and is directly reachable in my browser
@font-face {
  font-family: 'DJB Get Digital';
  font-style: normal;
  font-weight: 400;
  src: url(/local/djb_get_digital.ttf) format('ttf');
}

The relevant section of card config card config:

entities:
  - card_type: markdown
    content: |
      <br>
      <b>
      {{states("sensor.time")}}
      </b>
    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none';
        font-family: 'DJB Get Digital';
        font-size: 84px;
        text-align: center;
      }
    type: 'custom:hui-element' 

The file djb_get _digital.ttf is in config/www and is directly reachable in my browser . The font loads perfectly into windows with the font name DJB Get Digital.

Config file entry when trying frontend extra module method:

frontend:
  themes: !include themes.yaml
  extra_module_url: 
    - /local/loadfonts.js

Then the above extra module config was deleted and relpaced with this resource using the UI:

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

Restarts and cache clearing galore. Tried with and without quotes around the font name in the css file and in the Lovelace card.

Try getting a woff2 or something.

Thanks I’ll have a look. Assuming I can find one or convert my ttf to woff2, which methof would I use to load it?

Just format('woff2')

1 Like

Hallelujah!

I used an online converter to convert from ttf to woff2.

Used both the fonts.css file (tried this alone unsuccessfully) and loadfonts.js flie with the resource added in the Dashboards UI.

Thank you both for your assistance.

1 Like

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.

So can you access locally

  • The font file
  • The font css loader

:grey_question:

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

You can indeed. I used:

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

And this fixed the issue.

Thanks again.

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!

  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 your Configuration / Lovelace Dashboards / 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.

2 Likes

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

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?

Show your card config.

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

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 ?

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

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