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:
- Remove the font-style and font-weight and quotes from
fonts.css, and check that it loaded by using network tab in devtools. - Remove the quotes in font-family.
- Check you can access the font file and css file with your browser.
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.
That’s the problem. I could never get it to load.
Truetype fonts don’t seem to be supported, at least not in my browser. No problem with otf and woff files and the stylesheet format that has been posted above.
If you continue to have problems getting just the stylesheet loaded, you can try loading a javascript file instead that in turn injects a stylesheet link in the <head> section of the site.
Example js code for let’s say loadFonts.js:
function loadcss() {
let css = 'http://hassio.local:8123/local/fonts.css?v=0.001'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
I load that js file via a yaml entry in configuration.yaml but I guess adding it through the resources tab in the interface should work too. In configuration.yaml in stead of the lovelace: resources: section, you could also add
extra_module_url:
- /local/loadFonts.js
inside the frontend section. This will make the font available outside lovelace too (to style other interface elements).
I also found that that way I can change the .js file, save and just reload the browser window with CTRL+F5 without the need for any restart or core reloading to apply changes.
1 Like
I tried both the configuration.yaml and configuration/resources method. Unfortunately neither worked. I edited the loadfonts.js file because I’m using https,
function loadcss() {
let css = 'https://my_domain_redacted.duckdns.org/local/fonts.css'
let link = document.createElement('link');
let head = document.getElementsByTagName('head')[0];
let tmp;
link.rel = 'stylesheet';
link.type = 'text/css';
tmp = link.cloneNode(true);
tmp.href = css;
head.appendChild(tmp);
console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();
Thought that must be it. But no luck.
In a final effort to get this sorted I’ll list all the details I have,
- The above file, loadfonts.js is in config/www
- The below file (named fonts.css) is in config/www and is directly reachable in my browser
@font-face {
font-family: 'DJB Get Digital';
font-style: normal;
font-weight: 400;
src: url(/local/djb_get_digital.ttf) format('ttf');
}
The relevant section of card config card config:
entities:
- 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-family: 'DJB Get Digital';
font-size: 84px;
text-align: center;
}
type: 'custom:hui-element'
The file djb_get _digital.ttf is in config/www and is directly reachable in my browser . The font loads perfectly into windows with the font name DJB Get Digital.
Config file entry when trying frontend extra module method:
frontend:
themes: !include themes.yaml
extra_module_url:
- /local/loadfonts.js
Then the above extra module config was deleted and relpaced with this resource using the UI:
URL: /local/loadfonts.js
Type: JavaScript Module
Restarts and cache clearing galore. Tried with and without quotes around the font name in the css file and in the Lovelace card.
Try getting a woff2 or something.
Thanks I’ll have a look. Assuming I can find one or convert my ttf to woff2, which methof would I use to load it?