As often, no clear description in the manual pages. https://www.home-assistant.io/lovelace/yaml-mode/
resources:
- url: /local/my-custom-card.js
type: js
- url: /local/my-webfont.css
type: css
And then?
Apparently this means you have to have a ‘my-webfont.css’ in /config/www/.
But…
Raw css doesn’t work.
The themes: like css doesn’t work.
While using ?v=123 behind .css.
Is the css resource still under development?
Anyone who got CSS working?
Kick. Anyone?
Also keen to know how to get fonts into Lovelace.
Add a Google font to the Lovelace config like this:
resources:
- type: css
url: 'https://fonts.googleapis.com/css?family=your+font+here'
In your theme, use the font:
primary-font-family: 'your font here'
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
You can try to add other css-resources that way, and they will load, but… it is very hard to override the other styles that way.
This works for some of the fonts but not a lot of them. I’m finding that many still load as Roboto and they inherit that from the base html for HA. I’m trying like hell to find a way to override without having to card-modder every damn card but I can’t. If anyone has any ideas, let me know.
You’re right about that, unfortunately. Eventually, I will switch to card-modder for finetuning, to have more control. But if you have a lot of cards, that may be a dealbreaker :-).
Anyway to use this (or something similar) to override the default state-icon icon and replace with an MDI icon? Just need different icons for lovelace picture-element floorplan
I haven’t found a way yet… thanks
@Nitram @chipriley I was able to get around the font issues with a custom css file. I created the following file, /config/www/custom-lovelace/font.css:
body {
font-family: "Lato", sans-serif !important;
}
And then, in my resources section of my Lovelace config, I added the following:
- type: css
url: /local/custom-lovelace/font.css
That seems to have successfully overriden the font everywhere in my setup.
This may seem like a dumb question but I’m new to HA. Where can I find the “lovelace config” I keep seeing people mention? The theme I want requires a font but I don’t know where to put the code for it. This is what they say to put in the Lovelace config:
resources:
- url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
type: css
Do I need to create a lovelace yaml file in my config/ folder or something?
Go to “lovelace dashboards” in the configuration menu and you will see a tab at the top called “resources”
I see that but it asks me to enter a url and then a type. The only two options I have are JavaScript module and stylesheet.
It also says “bad resources could seriously harm my system” (whatever that means) which makes me hesitant to try to enter one there and potentially do it wrong. Any advice?
the URL is the “https://…” part of the resource you have above.
the type will likely be stylesheet since I’m pretty sure that’s what css is (Cascading Style Sheets).
Ah perfect! thank you
Copied and pasted the exact code because I also wanted to install Lato font but no luck…
Is adding font.css and defining the resours the only thing you did? No need to type https://fonts.googleapis.com/css?family=Lato anywhere?
is there a solution for that? I added the resource, added the code on my css, but it still not works 
Thanks for the css above and i successfully deployed the above on my desktop but has anyone got an idea on how to change the font in a mobile app/phone/webview instance???