Im trying to set the font of the badges on home assistant using a style.css and a simple theme ( see below ), everything but the badges uses the correct font.
html, body, * {
font-family: “Kode Mono” !important;
}
newfont:
primary-font-family: “Kode Mono”
font-variant-numeric: “Kode Mono”
paper-font-common-base_-font-family: “var(–primary-font-family)”
paper-font-common-code-font-family: “var(–primary-font-family)”
paper-font-body1-font-family: “var(–primary-font-family)”
paper-font-subhead-font-family: “var(–primary-font-family)”
paper-font-headline-font-family: “var(–primary-font-family)”
paper-font-caption-font-family: “var(–primary-font-family)”
paper-font-title-_font-family: “var(–primary-font-family)”
ha-card-header-font-family: “var(–primary-font-family)”
There are plenty of places in HA where your custom font isn’t used (notifications for example) and the “Roboto” font is hardcoded in the source of the page.
If you can;t fix it using the variables available, do a search for “global-mod” at this site. It’s pretty new, and obviously feels like overkit/unneeded, although it does the job until HA core and all the hardcoded font-styles are fixed or until there is a proper theme system implemented out of the box.
Thanks,
I’ve tried using the global mod, this is what I came out with:
sidekick-global-mod:
yellowDrawer-path: “/”
yellowDrawer-selector: “home-assistant-main$ha-drawer”
yellowDrawer-style: |
ha-sidebar {
background-color: yellow;
}
main-path: “main”
main-selector: “home-assistant-main$partial-panel-resolver ha-panel-lovelace$hui-root$div”
main-style: |
.header {
–app-header-background-color: red;
font-family: “Kode Mono”
}
.badge {
font-family: "Kode Mono"
}
It does the test which is setting the drawer yellow, but not setting the font.