th3jesta/ha-lcars

Answer Known: Document how to host font locally

askpatrickw opened this issue · 11 comments

askpatrickw commented

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 commented

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

askpatrickw commented

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');
}
  1. 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();
  1. 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 commented

I don't see a thread. Link?

th3jesta commented

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.

  • 👍1
FoxXxHater commented

Hay,

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

FoxXxHater commented

Chrome Console Log:
image

th3jesta commented

Chrome Console Log: image

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 commented

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

th3jesta commented

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 commented

Okay, i will try that