Custom font styling is not applied to markdown card

My Home Assistant version: 0.111.0

My lovelace configuration method (GUI or yaml): yaml

What I am doing: applying custom styling to a markdown-card

What I expected to happen: font styling is applied to element h1

What happened instead: no styling is applied. Safari reports User Agent Style Sheet. Issue is present in Firefox too.

Minimal steps to reproduce: Use the aforementioned yaml in a view.

- type: markdown
   content: |
     # Vacuum automation
   style: |
     ha-card {
       height: 50px;
       --paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
       box-shadow: 2px 2px rgba(0,0,0,0.0);
     }
     h1 {
       font-size: 14px;
       font-weight: thin;
       font-family: Helvetica;
       letter-spacing: '-0.01em';
     }

Error messages from the browser console: (I don’t think these are related)

[Error] hui-thermostat-card – Error: Specify an entity from within the climate domain.
Error: Specify an entity from within the climate domain.
	s (chunk.6dbb65acb727c33dd251.js:2144:318438)
	value (chunk.ab96942901cd9a8d7754.js:146:46870)
	(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] hui-alarm-panel-card – Error: Invalid card configuration
Error: Invalid card configuration
	s (chunk.6dbb65acb727c33dd251.js:2144:318438)
	value (chunk.ab96942901cd9a8d7754.js:146:46870)
	(anonymous function) (chunk.ab96942901cd9a8d7754.js:146:47612)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob
[Error] Failed to load resource: the server responded with a status of 404 () (index.m.js.map, line 0)

---

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

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

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

• Have followed the troubleshooting steps of the “Common Problems” section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• 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.

[gadgetchnnel]

@ASNNetworks

I think it would be like this:

style:
  .: |
    ha-card {
      --paper-card-background-color: none !important;
      box-shadow: none !important;
      height: 30px; 
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 10px;
        font-weight: thin;
        font-family: Helvetica;
        letter-spacing: '-0.01em';
      }

[gadgetchnnel]

The markdown card now has the following structure

ha-card |__ shadow-root |__ha-markdown |__shadow-root |__ha-markdown-element

So, you need to follow the advanced usage instructions and do something like:

type: markdown
content: |
  ## <br>
  # {{states("sensor.time")}}
  ## <br>
  ## {{ states("sensor.date_time") }}
style:
  ha-markdown:
    $: |
      h1 {
        text-align: center;
        font-size: 6em;
        margin-bottom:12px;
        margin-top: 12px;
      }
      h2 {
        text-align: center;
      }

That appears to work and gives me: