Use TTF in Lovelace

[tom_l]

I don’t even have anything that can open woff2 files.

One thing though. This file-name: DJBGetDigital.woff2 should be all lower case. As per step 3:

@tom_l

Put the created djbgetdigital.woff2 file in config/www

I’ll edit the step to highlight that.

[dir]

Thanks! Now its up and rundning!

[Alesoft73]

@tom_l

font-family: "DJBGetDigital";

Hi,
sorry if i disturb @tom_l
But in HA ver.2020.12.0 dont work to add a font in the style.
Is possible or is my problem

[tom_l]

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

[Alesoft73]

Many, thanks…
When you update send me a feedbak

[tom_l]

I just updated and my font imports are still working.

[Alesoft73]

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

[Meelobee (Martijn)]

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');
}

[j3mu5]

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)"

[mark-zarandi]

Hey good job getting this across.

[tom_l]

Thanks, I had a lot of help.

[smugleafdev]

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.

[KTibow (Kendell R)]

How is fonts.css supposed to be loaded?

[smugleafdev]

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.

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