Font of the theme not working for sidebar

Configuration Frontend
1

Hi! I successfully added custom font in resources and changed font in the theme’s yaml file.

image
image1353×431 32.2 KB

But font was only applied for some titles and thats all, even the sidebar still the same:
image
image318×610 15 KB

In different guides I saw, that the font of the sidebar have changed, so it is possible, what am I doing wrong? I tried different fonts, but nothing have changed.

Here is the code of the theme for fonts:

  # Font
  primary-font-family: 'Tektur'
  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)"

I can give a full code of the theme if it is necesarry.
I know, that theme’s font not applying for all cards, but I want to be sure, that it was applied for everything it can be.

2

When working with fonts on webpages you need to make sure that cache is either disabled or constantly cleared.
You also need to make sure your clients have the font, because fonts are not universal, so Arial might not be available on Android or Macs and it might be opposite with other fonts.

3

Thank you, I will notice this!
However… I see the font in some titles, so it is avaliable at least for PC. But when I cleared cache and reload webpage, font changed to Times New Roman:

image
image1331×430 35.2 KB

So I decided to exclude all possible mistake, I added font Tektur to resources via link: https://fonts.googleapis.com/css2?family=Tektur:[email protected]
Then created absolutely new theme, this is the whole code:

MyOnlyFontTheme: 

  # Font
  primary-font-family: 'Tektur'
  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)"

Then I changed the theme in user settings and resterted HA. After that I saw font Tektur only in some titles, as it was before:

image
image1035×328 35.7 KB

But when I cleared cache and reload webpage, font changed to Times New Roman again…
Latest version of HA. What am I missing?

4

Did you every figure this out - currently having the same / similar issue

5

Uhh, no… Just skipped that issue with sidebar and continued to fix the main part of interface. It was necessary to fix other cards with card mod manually.