Change Font size in Entity Card

So First I have pretty much no idea what I am doing.
I would like to change the font size of these to 18 or 20…
image

If I check Chrome Dev tools the info is located here.
image

I’ve tried adding this and it’s not working (yes I know this shows 16, I was just trying to make an obvious change so that I know if it was working)
image

Any pointers to what I am missing?

1 Like

I have been trying the same with an entities card by using Lovelace card-mod 3 which should work but I have not had any luck. I use Firefox though and that could be a reason. So you might be able to get it to work.

You wrote “vlaue” instead of “value”

hahah. Thanks good eye.
where were you 3 months ago. lol

I am struggling with what seems like a simple task. I have an entity card and I want to change the font size of the attribute on the card.

type: entity
entity: remote.livingroom
attribute: current_activity
card_mod:
  style: |
    ha-card {
      color: red;
      font-size: 8px;
    }
    .span.value {
      font-size: 8px;
    }

entity2
I can do it on an Entities card.

type: entities
entities:
  - entity: remote.livingroom
card_mod:
  style: |
    :host {
      font-size: 8px;
    }

entity3
I have used the Developer Tool in Edge to get the information on the entity card

I need some help in how to properly interpret the CSS data and use it in the card.

Any suggestions?

Thanks

Using simply .value works for me:

2 Likes

So simple! THANK YOU :slight_smile:

I have some problem with text on a single (of double) column.
It cut the font size. How can I fix it?

I can’t get the font size to change on my cards either. I have tried several things. All without success. Do you have any idea what I am doing wrong?

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.presence_simulation
    icon: mdi:robot-happy
    name: Simulation
    show_state: false
    style: |
      :host {
        font-size: 8px !important;
      }

or

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.presence_simulation
    icon: mdi:robot-happy
    name: Simulation
    show_state: false
    style: |
      ha-card {
        font-size: 8px !important;
      }

or

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.presence_simulation
    icon: mdi:robot-happy
    name: Simulation
    show_state: false
    font-size: 80%
1 Like

This won’t work with standard button card. Use custom button card

Hi All
Thought I’d add on to this post to see if anyone can help with my issue. I’m trying to increase the font size of a simple entity card displaying temperature. I’ve been reading and searching for something related but have now given up and decided to post my specific issue.
When I use the card-mod code to increase the font size, it just increases the spacing (see screen shots). Can someone please help?!
Screenshot 2022-12-29 235722|690x445

1 Like

I don’t use entity card anymore, for many things (including replacement for markdown) i use cusotm:button-card. It’s massively adaptable, has tons of functions and it’s, i think, one of most usable cards in HA.

card-mod thread → 1st post → link at the bottom → styles for Entity card

How would I go about changing the title font size of people at home? It appears to be under h1.card-header

  bottomCard:
    type: custom:layout-card
    layout_type: custom:vertical-layout
    layout:
      max_cols: 1
    cardStyle: |
      :host {
        width: 104% !important;
        position: absolute;
        bottom: 0%;
        left: -2%;
      }
      .column.cards {
        max-width: 100% !important;
      }
      .cards > :last-child {
        margin: 0px !important;
      }
      column {
        font-size: 10px !important;
      }
    cardOptions:
      cards:
        - type: entity-filter
          entities:
            - person.falco1717
          state_filter:
            - home
          card:
            type: glance
            title: People at home
            show_state: false
            show_name: false
            style: |
              ha-card {
                background: none  !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 4px;
                font-size: 1;
                border: none;
              }
        - type: custom:simple-weather-card
          backdrop: false
          entity: weather.openweathermap
          name: ' '
          tap_action:
            action: navigate
            navigation_path: /dashboard-test/meteo
          style: |
            ha-card {
              background: none  !important;
              box-shadow: none !important;
              padding: 0 !important;
              margin: 4px;
              font-size: 1vw;
              border: none;
            }
        - type: custom:mini-graph-card
          tap_action:
            action: none
          show:
            icon: false
            legend: false
            name: false
          entities:
            - sensor.openweathermap_temperature
          font_size: 35
          update_interval: 15
          font_size_header: 9
          hours_to_show: 24
          points_per_hour: 1
          icon: mdi:home-thermometer-outline
          color_thresholds:
            - color: '#4dd2ff'
              value: 0
            - color: '#ffa31a'
              value: 20
            - color: '#ff1a1a'
              value: 0
          style: |
            ha-card, ha-card > div {
              padding: 0px !important;
              border: none;

            }
            ha-card > .header.flex > div, ha-card > .states.flex > div {
              padding: 5px !important;
              font-weight: 500;
            } 
            ha-card > .info.flex > .info__item > .info__item__time {
              display: none;
            }
            ha-card {
              background-color: rgba(40,40,40,0);
            }
            .name > span {
              font-weight: 500 !important;
            }

I have the same problem… did you manage to fix this?

Can you please post your code?

More call for Dashboard style edit features in the UI me thinks. It’s long overdue.

1 Like

Why in the living heck is this not a standard feature?

Not to digress this thread, but I am trying to alter the font size of the state in an entity card. Worked on this for a few days with many different tries, but unable to alter the state font size. NP altering the entity text. Any ideas very welcome. By way of example, I am trying to make the “Unlocked” text smaller.

You will see this if you scroll up a bit