For a lovelace clock card I would like to use an LCD TTF font file I have here:
/local/fonts/DJB Get Digital.ttf
Is this possible?
Current card config:
type: markdown
style: |
ha-card {
padding-top: 18px;
border: solid 2px var(--primary-color);
}
h1 {
text-align: center;
font-size: 6em;
margin-bottom: 0px;
}
h2 {
text-align: center;
}
content: |
# {{ states("sensor.time") }}
## {{ states("sensor.date") }}
I do this using (in a picture-elements card):
- type: custom:hui-markdown-card
content: >
Coming Up...
style:
top: 8%
left: 83%
width: 28%
text-align: center
font-family: Quicksand
font-size: 34px
"--primary-text-color": "#A1A1A1"
"--paper-card-background-color": "rgba(0, 0, 0, 0.0)"
"--ha-card-box-shadow": none
This is in my resources.yaml
- url: https://fonts.googleapis.com/css?family=Quicksand
type: css
I’m not sure how you’d relate that to a local font but maybe it is helpful?
Yeah a search tuned up similar results but this font isn’t available as a hosted css resource. It’s a local ttf file.
Can you refer to the local file as a resource? file://…
Sure the url is just local/fonts/etc...
But what is the type?
And how do I use it in the card?
I think I can use this to generate the css resource:
I’ve found another way that does not work. 
I used the link above to generate the font kit. Saved it to my www folder. They include a sample html file that displays the font correctly.
Added this to my resources:
- url: /local/fonts/lcd/css?family=djb_get_digitalregular
type: css
But adding this to my card does not change to font to the expecte one.
content: |
# {{ states("sensor.time") }}
## {{ states("sensor.date") }}
style: |
ha-card {
font-family: 'djb_get_digitalregular';
padding-top: 18px;
border: solid 2px var(--primary-color);
}
h1 {
text-align: center;
font-size: 6em;
margin-bottom: 0px;
}
h2 {
text-align: center;
}
type: markdown
Did you figure this out? I have an otf-file I want to use.
Unfortunately not.
If you want to use a Google font, just do
If you want to use your own font, put them in /config/www/, and then put this in /config/www/fonts.css:
@font-face {
font-family: 'My Font';
font-style: normal;
font-weight: 400;
src: url(/local/myfont.ttf) format('ttf');
}
Thanks but that still does not seem to work.
- card_type: markdown
content: |
<br>
<b>
{{states("sensor.time")}}
</b>
style: |
ha-card {
--ha-card-background: 'rgba(0, 0, 0, 0)';
--ha-card-box-shadow: 'none';
font-size: 84px;
font-family: 'djb_get_digital';
text-align: center;
}
I have restarted and cleared my cache.
Things to try:
fonts.css, and check that it loaded by using network tab in devtools.I can access both from my browser.
No change
From the css file? - no change
Could not see it in the list. Should I be adding a configuration / dashboard / resource?
Yes, you need to add /local/fonts.css to your resources as a CSS file.
Added /local/fonts.css to resources as a stylesheet.
Refreshed cache.
Still not loading according to the inspector/network tab.
Make sure to clear any selectors in the network tab and reload…
That’s odd though. You used the UI right?
To add the resource? Yes.
It was on all. I tried css and fonts neither contained anything.
Sounds like a Home Assistant problem then…
Thanks for trying.
yeah it’s a pain in the ass, your story sounds similar to mine. At one point i did manage to get the fonts loaded, don’t really remember what did the trick though, sorry.
Just one tip: use versioning on the resource url (like ?v=0.1) in between restarts, then check in developer tools of the browser if the updated version has been loaded.