Answer Known: Document how to host font locally

[askpatrickw]

I also run HA in my "shuttle" (Ok it a van) and we sometimes don't have an internet connection. It would be ideal to be able to host the fonts locally.

I'll look into this, as well and offer a doc update when\if I figure it out, but I'm opening this Issue in case someone already has the info.

[askpatrickw]

This thread is interesting ...
Not working for me though.

[askpatrickw]

Just to record what has been tried and what is working...

1. I looked in the developer console and download the WOFF version of the font which was being dowloaded from google fonts. I uploaded this to /config/www/antonio.woff2. Attached here: antonio.woff2.zip
2. I created /config/www/fonts.css as in the thread above pointing to the antonio.woff2 file.

@font-face {
  font-family: "Antonio";
  src: url(/local/antonio.woff2) format('woff2');
}

4. I added the /config/www/loadfonts.js file as in the thread above.

function loadcss() {
    let css = '/local/fonts.css?v=0.006'

    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();

5. I added the /config/www/loadfonts.js as a resource in Dashboards and remove the google font resource.

I restarted Home Assistant, used "clear cache and reload" It didn't seem to work at first, but finally it did work and all seems good now!!

I'm happy to add this to the README or we can't point people to this Issue.

[th3jesta]

I don't see a thread. Link?

[th3jesta]

Also, thanks a lot for this. This will help out other shuttlecraft owners, or folks who want their Home Assistant to be air-gapped. I added a link to this issue in the Tips and Tricks section.

[askpatrickw]

The thread I didn't link

http://community.home-assistant.io/t/use-ttf-in-lovelace/143495/48

[FoxXxHater]

Hay,

I have the problem that the files wont load...
So i looks:

[FoxXxHater]

Chrome Console Log:

[th3jesta]

Chrome Console Log:

Please ensure that the Resource you set up for lcars.js is of type JavaScript and not Stylesheet, as instructed: https://github.com/th3jesta/ha-lcars/blob/master/README.md#ii-add-the-font-and-javascript-file

[FoxXxHater]

As you see in my last (black) picture, the lcars.js is set as Javascript Module...

[th3jesta]

Try replacing /config/www with /local. That is how Home Assistant refers to the www directory. Not sure if it will fix it, but either way, that's best practice. So,

/local/lcars.js and /local/loadfonts.js

[FoxXxHater]

Okay, i will try that