One problem I have with Home Assistant is that, as wildly versatile and powerful it can be, it has a very steep learning curve for people who are not already expert programmers. I dabble in web coding, and I consider myself perhaps more naturally inclined to understanding certain technology compared to the average person, but when it comes to things like HA, I am heavily dependent on written guides before I can continue on my own.

Now that I have Home Assistant running mostly autonomously, I decided to take more control of the aesthetic of the dashboard. Users can download themes made by other users, but I would like to design my own theme. Unfortunately, the documentation on this is very technical, brief, and scattered. For a starting point, I wanted to figure out how to change the font. There is no option to simply add font files and activate them from a dropdown menu. It took me about a week to piece together the following set of instructions that is both coherent and linear.

1. Using the File Editor app, navigate to homeassistant/www.
2. Create a folder named fonts.
3. Upload the desired font files into the new homeassistant/www/fonts folder.
4. Navigate back to homeassistant/www.
5. Create a new file in this folder, fonts.css.

fonts.css

In the fonts.css file, each uploaded font file will have its own @font-face tag with appropriate attributes listed out. In my case, I wanted the font Inter. I have read from other HA users that they had trouble with ttf fonts, and that woff2 fonts had the least problems, so I converted my ttf files into woff2, and renamed them to something simpler.

@font-face {
  font-family: "Inter";
  src: url(/local/fonts/inter100.woff2) format('woff2');
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: "Inter";
  src: url(/local/fonts/inter100italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 100;
}

In my example above, I want HA to recognize two files as belonging to the same typeface. They are both given the attribute font-family: "Inter";, but they are distinguished from one another using font-style, with one labeled normal and the other italic.

6. Stay in the folder homeassistant/www.
7. Create a second new file in this folder, loadfonts.js.

loadfonts.js

I found this batch of code in a thread on the HA community forum, posted by user tom_l.

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

8. Return to the main Settings page of Home Assistant.
9. Navigate to the Dashboards page.
10. Click the menu button (three dots) in the top right and click Resources.
11. Click Add resource. Fill in URL /local/loadfonts.js, select JavaScript module, and click Create.
12. Restart Home Assistant.

At this point, the user has a few ways they can access the fonts they uploaded. They could use the UIX integration (which replaces card-mod), or they could drop a few lines of code into a theme. The former approach will only apply the font onto an individual item on a dashboard, while the latter can apply it system-wide.