Fonts from Theme don't show on all cards

Configuration Frontend
1

I have installed a theme called Noctis from HACS. What I describe happens on all themes with included fonts that I have tried, not not specific to Noctis.

The Noctis theme has a file called noctis.yaml in directory /themes/noctis/

This file starts like this

noctis:  

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

  # Text
  text-color: '#ffffff' 
  primary-text-color: 'var(--text-color)'

I have added the following to Lovelace Resources (Configuration / Lovelace Dashboards / Resources:
https://fonts.googleapis.com/css?family=Raleway (Stylesheet)

When I change a Lovelace dashboard to this theme I get all the colors etc. so it appears to be loaded.

Not all (most donā€™t) of the cards get the Raleway font. The only card that I have added that takes the Raleway font is the custom:battery-state-card. Even with the battery-state-card only the heading gets Raleway. The rest of it below the heading (ā€œBattery Levelsā€ in the screenshot) is the default font.

Other cards remain on the default font.

I can use card-mod to change the font to Raleway and it works. But, that is a lot of work on every card on every dashboard.

Any ideas on what Iā€™m doing wrong / what I can do to fix it?

image

Thank you!!!

4 Likes
2

Iā€™m also having the same issue where the custom fonts are only showing in the headings. Using card-mod works but assigning the fonts directly in theme doesnā€™t work ā€˜properlyā€™.

Seems like I am missing something / would be an easy fix. Anybody have suggestions?

3

Has anybody found a solution yet?

4

Having exactly the same, did you guys solve it allready ?

5

Hereā€™s what worked for me.

Create a css (e.g. style.css) with this content:

body {
    font-family: "Raleway", sans-serif !important;    
    font-weight: 300 !important;
}

html {
    font-family: "Raleway", sans-serif !important;    
    font-weight: 300 !important;
    --paper-font-common-base_-_font-family: "Raleway", sans-serif !important;
    --mdc-typography-font-family: "Raleway", sans-serif !important;
    --paper-font-subhead_-_font-weight: 300 !important;
    --ha-card-header-font-family: "Raleway", sans-serif !important;    
}

Download the fonts from google fonts putting it in your config/www/fonts folder (create if need be) .

Once thatā€™s done, pop it in your config/www folder and then add a link in your resources to both the local.css and the font (raleway.css) as a style sheet.

e.g.:
/local/style.css
/local/font/raleway/raleway.css

If you already have an existing stylesheet, add what you are missing to the above. Hopefully that solves things if you havenā€™t figured it out for yourself.

2 Likes
6

@VPC Did you ever figure how to get fonts in themes to work properly?

8

Just add this code in the themes style sheet, just change the name of the font that you want to use, (you have to preaviously get it at google the font link an add it to resource)

 # Fonts
  primary-font-family: 'Josefin Sans,sans-serif'     <------YOUR FONT NAME
  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)"
9

Thank you, it really works. Moreover, if you add fonts via a link from Google Fonts, you can get by with just creating the aforementioned style.css file without downloading the font. I would mark this as a solution, although it requires a minor adjustment (The headings added in the 2024.10 release still use the default font, but I believe this will be fixed in the future).