I added the fonts variables as described above to my theme and the font as a resource to Lovelace but the fonts on the cards do not change. They are still using Robot … All other fonts in HA changed to the theme defined font. Any ideas what’s wrong? Using HA 0.91.2
@jerrychong25 these are the settings in my Lovelace:
background: top / cover no-repeat url('/local/ha.jpg') fixed
It’s a shorthand notation, combining size, position,… in one line, but it’s standard css. For more info, see f.e. https://www.webfx.com/blog/web-design/background-css-shorthand/
I suggest you try some different options for the size-part.
1 Like
@tefinger, tested it, and indeed, it doesn’t work in the newer release…
I experimented a little further. First, you need to check if the font is also the primary font in your themes.yaml.
What works: if you use custom cards, you can add a font like this (in the style section of the card):
font-family: var(--primary-font-family)
If you do that in every card, after that, if you change your primary font, it will change in all the cards.
The shadows are being displayed despite adding this to my theme.
My HA Version is 90.1.
Do you know what might be wrong? 
looks nice! it looks like you modified the theme, care to share? how do you have the transparency?
Thanks!
I used the card modder in every card: https://github.com/thomasloven/lovelace-card-modder
In most cards, I then used these styles:
style:
background-color: 'rgba(255,255,255,0.50)'
border-radius: 2px
box-shadow: '0 1px 1px rgba(0,0,0,0.05)'
font-family: var(--primary-font-family)
1 Like
that looks great!
1 Like
I can’t get any of the resources working on the latest HA version. Am I the only one with this issue?
@Nitram @tefinger crossposting from another thread, as I found an easier way to customize the fonts on the cards in case you’re still looking for this.
1 Like
Any chance of adding this to github?
How did you get the cards to be transparent and the header to be so small?
Thanks a lot for your very nice themes! I use both dark and clear! I added transparency to the cards as well (more modern look), but instead of using card modder for every card I changed some lines in your theme file.
Line changed (where the 0.3 is the transparency):
paper-card-background-color: 'rgba(255, 255, 255, 0.3)'
And for the dark one:
paper-card-background-color: 'rgba(0, 0, 0, 0.3)'
Thanks again!
3 Likes
Use ha-card-background instead.
paper-card-background-color
Ah thanks for the advice! Didn’t know that yet!
I had signed up because I would like to give credit for this theme which became my starting point for my layout. I also want to add my despise in lovelace’s use of shadow roots and hurdles needed to make a page feel more personalized. none the less, after mix matching many modules and cards along with my own code, I finally formulated something that I’m fairly happy with.
The theme suits well for an old touch tablet which I also went with the design from https://twitter.com/teachingbirds/status/1151113630391427072/photo/1?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1151113630391427072&ref_url=https%3A%2F%2Fwww.home-assistant.io%2Fblog%2F2019%2F07%2F17%2Frelease-96%2F
Thanks to both authors for the foundation of my layout.
2 Likes
As I could only post one image as a new user, I will reply again to give a perspective to using it on the tablet
3 Likes