Use TTF in Lovelace

tom_l · August 9, 2020, 6:03pm

To add the resource? Yes.

It was on all. I tried css and fonts neither contained anything.

KTibow · August 9, 2020, 6:06pm

Sounds like a Home Assistant problem then…

tom_l · August 9, 2020, 6:07pm

Thanks for trying.

kdw2060 · August 9, 2020, 6:32pm

yeah it’s a pain in the ass, your story sounds similar to mine. At one point i did manage to get the fonts loaded, don’t really remember what did the trick though, sorry.
Just one tip: use versioning on the resource url (like ?v=0.1) in between restarts, then check in developer tools of the browser if the updated version has been loaded.

tom_l · August 9, 2020, 6:34pm

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

kdw2060 · August 11, 2020, 7:34am

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.

tom_l · August 11, 2020, 5:18pm

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,

The above file, loadfonts.js is in config/www
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.

KTibow · August 11, 2020, 5:19pm

Try getting a woff2 or something.

tom_l · August 11, 2020, 5:21pm

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?

KTibow · August 11, 2020, 5:22pm

Just format('woff2')

tom_l · August 11, 2020, 5:35pm

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.

tom_l · August 12, 2020, 4:24pm

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.

KTibow · August 12, 2020, 4:51pm

So can you access locally

The font file
The font css loader

kdw2060 · August 12, 2020, 5:52pm

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).

tom_l · August 13, 2020, 8:11am

You can indeed. I used:

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

And this fixed the issue.

Thanks again.

dir · September 16, 2020, 12:15pm

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!

tom_l · September 16, 2020, 12:34pm

Download the ttf font from here: https://www.dafont.com/djb-get-digital.font
Convert it to a woff2 font here: online converter
Put the created djbgetdigital.woff2 file in config/www NOTE: the file-name needs to be all lowercase.
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();

Add the following to Settings → Dashboards → ⋮ (top right of page) → Resources

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

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.

dir · September 16, 2020, 12:43pm

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

dir · September 16, 2020, 3:13pm

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?

tom_l · September 16, 2020, 3:16pm

Show your card config.