Been struggling to find a solution to this, but does anyone know how to set a custom font-family globally across lovelace? Ideally something from Google Fonts or a TFF that I can upload to HA somewhere. I know you can do card mod on some components but it doesn’t work everywhere, only seems to work on a small number of fonts, and would also be incredibly tedious to go through every card like this. Thanks!
I used part of your config as dashboard.
is it possible to remove the line at the bottom, or make it 1 whole? that the window continues.
You can remove the box-shadow of the stack-in-card with card-mod at the bottom like this:
card_mod:
style: |
ha-card {
box-shadow: none;
}
If that doesn’t make any sense, post your code.
4 Likes
thank you very much, it worked!
is there an option to make it fit for any resolution?
1 Like
Looks like an official mushroom input number card may be on the way
1 Like
Is this the sort of thing you wanted?
Mushroom Folded Entities:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 42px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-light-card
entity: light.lounge_light
layout: horizontal
show_brightness_control: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.lounge_lights_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.lounge_lights_dropdown
state: 'on'
card:
type: custom:auto-entities
filter:
include:
- area: Lounge
domain: light
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
background: none;
padding: 4px 16px !important;
--ha-card-box-shadow: 0px;
}
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
18 Likes
@rhysb is there anyway to customize the mushroom title card font type, font size, font color?
The font type or size does not match the rest of the mushroom cards. At least to me they don’t look the same. It would be great if it was possible to make them match with card-mod or in the future get them to match natively.
Yes exactly this!! However I already tried that but as far as I know, my slider card does not have a light color state property. So I switched to mushroom light card. Thank you very much.
1 Like
so when you are planning to share the code :)?
I am not finished yet 
I will post right after I complete it.
1 Like
How can I make this template card take up as much space and be the same size as this lights card, with the picture on top and primary/secondary below just as it’s formatted in the second picture. Which is just the same code a as below but using a mushroom light card.
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'on'
entity_id: /[li]ghts/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: local/icons/custom_icons/ceiling-lamp.png
vertical: true
tap_action: none
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
sort:
method: entity_id
I am using DM Sans, which I personally think is a pretty cool font for HA! Screenshot below:
How to install and use (can apply to any font from Google by changing the name to match Google Fonts name, or adding extra lines to resources):
- Add to your resources.yaml file the below. I have added a few myself, like the below:
- url: 'https://fonts.googleapis.com/css?family=DM Sans'
type: css
- url: 'https://fonts.googleapis.com/css?family=Poppins'
type: css
- url: 'https://fonts.googleapis.com/css?family=Work Sans'
type: css
- url: 'https://fonts.googleapis.com/css?family=Nunito'
type: css
- url: 'https://fonts.googleapis.com/css?family=Raleway'
type: css
- Add the below to the theme you are using, changing the of the font on the first line to the one you want to use globally across HA:
primary-font-family: 'DM Sans,sans-serif'
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)"
- Reload themes and resources, or restart.
6 Likes
Amazing, that worked! Thanks a bunch 
mind to share some more screenshots of your setup? this looks good!
Yes, have a look here:
1 Like
@rhysb - I’m using the css you posted earlier in this thread for applying background art to my room cards, and wondered if there is any way to resize the background width to around half and fade it out to blend into the text area in my screenshot below?
I’m thinking something that covers approximately the red squared area, then blends to the card background color to the left of that?
I tried a bunch of CSS after searching online, but can’t seem to get anything that looks nice.
Sure, here you go! Haven’t had the chance to put much time in to it recently so lots of things are still a work in progress hence why some cards may look off…
Mostly based off Minimalist with a bit of Mushy in there for good measure
36 Likes
that´s a nice and clean setup. mind sharing your “header/title” code?
1 Like
You can find most of my code here:
You will need to use my theme “minimalist-shadow” for all the colours, or copy the colour codes, main-theme and -bg variables to your own.
13 Likes
Awesome thank you.
Any idea on this?