Use TTF in Lovelace

Configuration Frontend
44

Sorry, no idea. I have not updated from 0.118.

45

Many, thanks…
When you update send me a feedbak :slight_smile:

46

I just updated and my font imports are still working.

47

Ok now work… delete cache in all browser :slight_smile:
Sorry if i disturb.
Many thanks! @tom_l

1 Like
48

Thanks for this Tom! Got it working on the first try with these steps :slight_smile

One question though, can we add more fonts?

I tried, but it doesn’t seem to work for me, the DJBGetDigital font is working, but the other 2 fonts I’ve added are not showing.

Edit; Adding the additional fonts to fonts.css like this works:

@font-face {
  font-family: "Moon2.0";
  src: url(/local/fonts/moon20-regular.woff2) format('woff2');
}

@font-face {
  font-family: "NexaLight";
  src: url(/local/fonts/nexalight.woff2) format('woff2');
}

@font-face {
  font-family: "DJBGetDigital";
  src: url(/local/fonts/djbgetdigital.woff2) format('woff2');
}

@font-face {
  font-family: "ProductSans";
  src: url(/local/fonts/productsansregular.woff2) format('woff2');
}
49

Thanks, your way worked great for me! Now I can customize the font of cards.
Is there any way to replace the font globally? The menu and popup cards still have the default font. There is a way described by @apop but I can’t get it to work: How to Lovelace CSS

Edit: works now. One has to set the font via the theme:

themes:
  yorthemename:
  # Main colors that can be changed
    primary-font-family: "yourfontname"
    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)"
1 Like
50

Hey good job getting this across.

51

Thanks, I had a lot of help.

52

I skimmed the thread but I’m not sure what I’m missing.

  • Created /fonts/ in /www/, uploaded MyFont.otf
  • Add resource: /local/fonts/MyFont.otf
  • Themes:
mytheme:
  primary-font-family: "MyFont"
  ha-card-header-font-family: "var(--primary-font-family)"
  ...etc
  • Created fonts.css in /www/fonts/:
@font-face {
  font-family: "MyFont";
  src: url(/local/fonts/MyFont.otf) format('otf');
}

Still just shows Times, I think? Some serifed common font, everywhere. The font I’m uploading is san serif so it’s obvious it’s not working.

53

How is fonts.css supposed to be loaded?

54

Magic, I assume. Honestly I have no idea what that file does or at least is supposed to do. Is it necessary? It so I assume I need the css loader from above.

55

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

56

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!

57

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)

58

? was that to me, no comprende! ?

59

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)

60

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 :slight_smile:
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:

Capture d'écran 2023-12-28 103523
Capture d'écran 2023-12-28 103523624×817 21.9 KB

Capture d'écran 2023-12-28 105341

61

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
62

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.

63

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.