Use TTF in Lovelace

Configuration Frontend
1

For a lovelace clock card I would like to use an LCD TTF font file I have here:

/local/fonts/DJB Get Digital.ttf

Is this possible?

Current card config:

type: markdown
style: |
  ha-card {
    padding-top: 18px;
    border: solid 2px var(--primary-color);
  }
  h1 {
    text-align: center;
    font-size: 6em;
    margin-bottom: 0px;
  }
  h2 {
    text-align: center;
  }
content: |
  # {{ states("sensor.time") }}
  ## {{ states("sensor.date") }}
2

I do this using (in a picture-elements card):

              - type: custom:hui-markdown-card
                content: >
                  Coming Up...
                style:
                  top: 8%
                  left: 83%
                  width: 28%
                  text-align: center
                  font-family: Quicksand
                  font-size: 34px
                  "--primary-text-color": "#A1A1A1"
                  "--paper-card-background-color": "rgba(0, 0, 0, 0.0)"
                  "--ha-card-box-shadow": none

This is in my resources.yaml

- url: https://fonts.googleapis.com/css?family=Quicksand
  type: css

I’m not sure how you’d relate that to a local font but maybe it is helpful?

3

Yeah a search tuned up similar results but this font isn’t available as a hosted css resource. It’s a local ttf file.

4

Can you refer to the local file as a resource? file://…

5

Sure the url is just local/fonts/etc...
But what is the type?
And how do I use it in the card?

6

I think I can use this to generate the css resource:

7

I’ve found another way that does not work. :roll_eyes:

I used the link above to generate the font kit. Saved it to my www folder. They include a sample html file that displays the font correctly.

Untitled

Added this to my resources:

  - url: /local/fonts/lcd/css?family=djb_get_digitalregular
    type: css

But adding this to my card does not change to font to the expecte one.

content: |
  # {{ states("sensor.time") }}
  ## {{ states("sensor.date") }}
style: |
  ha-card {
    font-family: 'djb_get_digitalregular';
    padding-top: 18px;
    border: solid 2px var(--primary-color);
  }
  h1 {
    text-align: center;
    font-size: 6em;
    margin-bottom: 0px;
  }
  h2 {
    text-align: center;
  }
type: markdown
8

Did you figure this out? I have an otf-file I want to use.

9

Unfortunately not.

10

If you want to use a Google font, just do

If you want to use your own font, put them in /config/www/, and then put this in /config/www/fonts.css:

@font-face {
  font-family: 'My Font';
  font-style: normal;
  font-weight: 400;
  src: url(/local/myfont.ttf) format('ttf');
}
11

Thanks but that still does not seem to work.

font

  - card_type: markdown
    content: |
      <br>
      <b>
      {{states("sensor.time")}}
      </b>
    style: |
      ha-card {
        --ha-card-background: 'rgba(0, 0, 0, 0)';
        --ha-card-box-shadow: 'none';
        font-size: 84px;
        font-family: 'djb_get_digital';
        text-align: center;
      }

card

I have restarted and cleared my cache.

12

Things to try:

  • Remove the font-style and font-weight and quotes from fonts.css, and check that it loaded by using network tab in devtools.
  • Remove the quotes in font-family.
  • Check you can access the font file and css file with your browser.
13

I can access both from my browser.

No change

From the css file? - no change

Could not see it in the list. Should I be adding a configuration / dashboard / resource?

14

Yes, you need to add /local/fonts.css to your resources as a CSS file.

15

Added /local/fonts.css to resources as a stylesheet.

Refreshed cache.

Still not loading according to the inspector/network tab.

16

Make sure to clear any selectors in the network tab and reload…
That’s odd though. You used the UI right?

17

To add the resource? Yes.

It was on all. I tried css and fonts neither contained anything.

18

Sounds like a Home Assistant problem then…

19

Thanks for trying.

20

yeah it’s a pain in the ass, your story sounds similar to mine. At one point i did manage to get the fonts loaded, don’t really remember what did the trick though, sorry.
Just one tip: use versioning on the resource url (like ?v=0.1) in between restarts, then check in developer tools of the browser if the updated version has been loaded.