I’m having the same problem. I’m able to follow all the steps but I have no idea where to put these 2 lines:
URL: /local/loadfonts.js
ResourceType: JavaScript Module
Things have changed a bit since I wrote that post. It is no longer:
Instead:
Settings → Dashboards → ⋮ (top right of page) → Resources
Have updated the post.
This is awesome and WORKS great. However, there’s one big catch and I don’t know how to fix this. When using the mobile app the fonts don’t come through.
I should note that the fonts I am using in the fonts.css file use a public URL to one of my webservers so the HTTPS get for the fonts should work even on my mobile.
You cant find a similar font to download?
The font I am using is a converted ttf to woff2 file, and linked via URL in my fonts.css. I was hoping the mobile app would also use this but maybe it’s not. I get a “Times Roman” type serif font on my phone app.
Pictures speak a thousand words so here we go.
Web browser on my laptop using the fonts:
iPhone HA app:
Store the font file in your /config folder as per the instructions above that work for both mobile and local access.
Awesome sauce!
Thank you so much if I had just followed the instructions from the beginning it would have worked. I was trying to preempt the fact that mobile might need some publicly available URL for the fonts.
Thanks again! Works now.
I should add something here - and I apologize in advance if it’s already mentioned above - but if you add or change any of the fonts in fonts.css the phone app won’t pick up the changes.
You have to go into the app settings and look for a “Clear Frontend Cache” button which will clear the font cache. After doing that it might still be incorrect, but then pull down on the dashboard to reload the page and it will take a moment and refresh all your fonts and then they will all work.
playing bit with this (having a news ticker…) I cant make it happen just yet, even though I see:
I did change the syntax to use:
- url: /local/fonts/loadfonts.js?v=0.006
type: module
which I figured would be the modern correct way?
I have 2 font families in my folder
@font-face {
font-family: 'led_counter-7';
src: url(/local/fonts/led_counter-7.woff2) format('woff2');
}
@font-face {
font-family: 'led_counter-7_italic';
src: url(/local/fonts/led_counter-7_italic.woff2) format('woff2');
}
using those lowercase font names as the converter instructed me to use those.
type: markdown
content: |
{{states("sensor.time")}}
style: |
ha-card {
font-family: "led_counter-7";
}
and no font is loaded…
think think think… Bingo!!
thats what you get when copying older examples…
Card Mod requires the card_mod: nowadays!!
so, those 2 edits would probably be nice to add to the main solution post:
- syntax in resources:
- url: /local/fonts/loadfonts.js?v=0.006
type: module
- and card_mod syntax requiring:
card_mod:
style:
my Marquee (I know, old fashioned…)
Nice! thanks Tom
1 Like
Thanks Marius, I’ve updated the example.
1 Like
Does this work throughout your whole HA instance? Including the new data-tables under the settings, the notifications in the left ha-drawer, the HACS integration data-tables (HACS 2.0), the new data-table headers (with the search and selection items on top and to the left) and the Add-ons page inside Settings?
I’m talking about HA 2024.7 and up…
I’ve only ever used it to alter card fonts but I don’t see why it could not be applied anywhere - as long as you can work out the font variables to change using card mod themes,
Hmmm, right… There are a lot of places where the “ugly” (IMO) Roboto font is hard coded inside the files and there are no font-familiy CSS-variables used, which lead me to this question.
So, I was wondering if it would be possible to use the CSS-stylesheet (which is injected by JS) to override the default hardcoded Roboto font declarations by overriding the classes and id’s inside that stylesheet, together with the new font-family?
Offcourse, this is a temporary solution and sucks big time. But it’s better than the way it’s right now…