How to use a font for all of HA / how to duplicate default theme?

I want to upload a font and have it replace the default font for all of the UI in HA, including the sidebar. I believe one way to do this is to make a new theme. This leads me to believe I should duplicate the default HA theme and then change the font(s) to use the one I upload.

How can I do that?

You don’t have to duplicate the entire default theme: you can create a new theme that defines only the differences compared to the default theme.
Following the Theme Format example from the HA Frontend documentation, this is an example of an additional theme alternate_fonts with alternate primary and secondary fonts:

# Example configuration.yaml entry
frontend:
  themes:
    happy:
      primary-color: pink
      accent-color: orange
    sad:
      primary-color: steelblue
      accent-color: darkred
    alternate_fonts:
      # Fonts
      primary-font-family: "Century"
      secondary-font-family: "Consolas"
      paper-font-common-base_-_font-family: "var(--secondary-font-family)"
      paper-font-common-code_-_font-family: "var(--secondary-font-family)"
      paper-font-body1_-_font-family: "var(--secondary-font-family)"
      paper-font-subhead_-_font-family: "var(--secondary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--secondary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
      ha-card-header-font-family: "var(--primary-font-family)"

This example works for me on a Windows 10 PC with Firefox and with already existing fonts (Century and Consolas).
You can of course replace the font names to your liking, but I don’t know how to add extra fonts to the HA installation itself. Someone else?

1 Like

Fonts can be added as resources. While looking at a dashboard, click the three dots on the top right, select Edit Dashboard, click the new three dots, then select Manage resources. From there, click Add Resource, paste in the URL for the font, and select stylesheet. This works for a URL from the web as well as a local link like /hacsfiles/weathercard/fancy-font. At least I think so. Not sure if that’s the best way to do it, but that’s what I’ve done so far.

1 Like

Hey does your font got applied to all Home Assistant UI? I have some areas that still showing system font. I added the URL of the font to Resources and add a bunch of lines similar to what you posted above. Not sure if I’m missing something. Thanks

100% of Lovelace views have the font, which was my primary concern. A few places outside of my dashboards do not have the font. I’m not too worried about it, but if it was easy to fix the rest I’d do it.

True, when I refresh the page sometimes it shows some font that looks like Times News Roman font, F5 again and it shows the custom font (kinda bugging me). I did some digging and guess that you actually have to swap out all system fonts *ttf files like roboto.ttf, robotoitalic.ttf etc, basically get the font with all the styles (bold, italic, regular) that you want and rename them to match those system ones. I will drop it for now cause I don’t want to mess with that :D.