Intermittent issue with cardmod when casting

[jm-cook]

My Home Assistant version: 2024.6.1

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Overriding mushroom theme with cardmod

What I expected to happen: Updated font style

What happened instead: Works in web browser. Sometimes doesnt work on casted (to google nest) dashboard. Not easy to see what influences when the font is incorrectly displayed. It seems that sometimes, when loading a dashboard with a mushroom card where the font size is overridden, the updated font size is not honoured, and falls back to the font size set by the theme. I suspect it could have something to do with the order in which the elements are created on a nest display so I used the outermost element "mushroom-card" and set the font on all shadow roots as in the example in the README.md but it doesnt help.

In the image below, it is the clock top left that is using the wrong font.

I have also tried to set a style 'bigfont' in the dashboard's theme, and get this entry to use that but I really didn't manage to figure out how to set the style in this way on a mushroom card.

Minimal steps to reproduce:

Create a dashboard using mushroom cards then add the card below. My example with full code download is here: https://github.com/jm-cook/my-smart-home/tree/main/nest-hub-dashboard

# The least amount of code possible to reproduce my error
type: custom:mushroom-template-card
primary: '{{ states(''sensor.current_date'') }}'
secondary: '{{ states(''sensor.time'') }}'
icon: ''
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
entity: sensor.time
fill_container: true
icon_color: ''
card_mod:
  style:
    mushroom-card $: |
      .container {
         --card-secondary-font-size: 160px;
         --card-secondary-line-height: 175px;
         --card-primary-line-height: 40px;
         --card-primary-font-size: 30px;
      }
view_layout:
  grid-area: timedate
layout: vertical

# End of code

Then cast this as a dashboard to a google nest hub using the cast-and-recast blueprint. After some considerable time The dashboard will show up with the time shown in the wrong font. Stopping the cast and allowing the blueprint to recast solves the issue... until next time.

Error messages from the browser console: None

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[jm-cook]

I have so far (in the last couple of days) not seen any repeat of this issue. I carefully read the installation instructions once more and installed card_mod as a frontend module in configuration.yaml (rather than as a lovelace resource).

frontend:
    extra_module_url:
        /local/community/lovelace-card-mod/card-mod.js

Using the path above gives best results. If I used /hacsfiles/lovelace-card-mod/card-mod.js then I still saw the problem (I think).

[jm-cook]

I have so far (in the last couple of days) not seen any repeat of this issue. I carefully read the installation instructions once more and installed card_mod as a frontend module in configuration.yaml (rather than as a lovelace resource).

frontend:
    extra_module_url:
        /local/community/lovelace-card-mod/card-mod.js

Using the path above gives best results. If I used /hacsfiles/lovelace-card-mod/card-mod.js then I still saw the problem (I think).

I spoke too soon. This morning I had the default font back on the modded card on my display. 😞