Font in Dashboard only visible when in editing mode

Configuration Frontend
1

I created a new custom theme with a different font in it.
The theme is only selected for the dashboard and not the whole Home Assistant frontend. Somehow I can only see the font when the Dashboard is in editing mode like this:

Bildschirmfoto 2024-05-14 um 15.09.41
Bildschirmfoto 2024-05-14 um 15.09.411288×476 101 KB

When I exit the editing mode, the font goes back to default again. Why?

The theme is only applied to the dashboard, not to the whole Home Assistant. But if I apply the theme to the whole Home Assistant, then the font gets displayed correctly.

But I want the theme to only be visible for my dashboard. Any ideas?

2

Any idea someone?

3

If you post your theme yaml maybe somebody can help you.

4

My first guess is a cache issue in the browser. Have you cleared the cache?

1 Like
5

Of course, here you go:

Code: Kibibit Edit - Pastebin.com
(it’s the kibibit theme which I edited a bit)

Fonts part in theme:

Bildschirmfoto 2024-05-27 um 18.27.02
Bildschirmfoto 2024-05-27 um 18.27.021338×666 111 KB

Font CSS

Bildschirmfoto 2024-05-27 um 18.26.13
Bildschirmfoto 2024-05-27 um 18.26.131338×594 62.2 KB

Bildschirmfoto 2024-05-27 um 18.25.46
Bildschirmfoto 2024-05-27 um 18.25.462928×460 11.5 KB

I mean weird thing is, that the font works when I apply the theme to the whole Home Assistant.

6

If anyone is having this issue in 2025, I found that when using HA 2025.5.1 I had to use the Sections layout and add a new variable to my theme to make it work:

ha-font-family-body: "var(--primary-font-family)"

That way, my dashboards can finally override the font properly when a theme is set on them :smiley:

1 Like
7

This worked for me thanks! I was losing my mind trying to find the problem :slight_smile:

1 Like