Use TTF in Lovelace

[tom_l]

Follow all the instructions in this post: Use TTF in Lovelace - #33 by tom_l

[ninjaef]

Hi @tom_l , just arriving here via forum search…
In your instructions - thank you - you write:

5. Add the following to your Configuration / Lovelace Dashboards / Resources:

… what files need to change , where are they ? Beginner here and this is first card mod ever!

[KTibow (Kendell R)]

card-mod or editing files aren’t relevant to that step. Just go into the configuration UI. (Also make sure you have advanced mode on)

[ninjaef]

? was that to me, no comprende! ?

[KTibow (Kendell R)]

Yes, I was talking to you. Here is a Spanish translation of what I said:

card-mod o el proceso de editar archivos no son relevantos para ese paso. Solo entra en la interfaz de configuración. (También asegúrate de tener activado el modo avanzado)

[ecou2508 (Eddy)]

Thanks to all of you for this, i’m now able to use Original font that appears on the display of my Onkyo TX-NR609
I associate Custom button-card with the above css trick.

    styles:
      card:
        - height: 75px
      name:
        - font-family: LED Dot-Matrix
        - font-size: 42px

And the Dot Matrix is available free here: 30 Free Digital, Dot Matrix Fonts · 1001 Fonts
Examples of use for my Onkyo remote on smartphone:

[Charel]

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

[tom_l]

Things have changed a bit since I wrote that post. It is no longer:

@tom_l

Add the following to your Configuration / Lovelace Dashboards / Resources:

Instead:

Settings → Dashboards → ⋮ (top right of page) → Resources

Have updated the post.

[dmcentire (Dennis McEntire)]

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.

[tom_l]

You cant find a similar font to download?

[dmcentire (Dennis McEntire)]

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:

[tom_l]

Store the font file in your /config folder as per the instructions above that work for both mobile and local access.

[dmcentire (Dennis McEntire)]

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.

[dmcentire (Dennis McEntire)]

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.

[Mariusthvdb (Marius)]

@tom_l

URL: /local/loadfonts.js
ResourceType: JavaScript Module

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

[tom_l]

Thanks Marius, I’ve updated the example.

[stefan1982 (Stefan)]

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…

[tom_l]

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,

[stefan1982 (Stefan)]

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…

[tom_l]

See: 🔹 Card-mod - Super-charge your themes!