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.