... but the glyph *IS* in the ttf file!

ESPHome
1

I’m using the GUITION-4848S040 display (ESP32-S3) and have a nice first page created. Now, I’d like to add some icons for battery status, weather, etc. I am consistently running into a basic error when I define a glyph - I’m assuming there is a configuration step I must be missing somewhere.

The relevant YAML snippet is:

font:
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font_20
    size: 20
    glyphs:
      - "\U000f0081"   # battery-80

I get the error:

Font /config/esphome/fonts/materialdesignicons-webfont.ttf is missing 1 glyph: 󰂁 (b'\\U000f0081').

The font file is corrected found in the folder. I’ve verified the TTF file contains all the glyphs I want. I get the same error if I copy/paste the glyph itself.

Many web searchs and AI questions have not resolved this error. Any ideas?

EDIT: One of the websearches suggested that the Python parser wouldn’t like the upppercase characters in the glyph string.

Changing the glyph string to "\U000f0081" still gives the same error.
Changing the glyph string to "\u000f0081" gives a different error: Found duplicate glyph: 0 (b'0').

(Corrected the value to f0081.)

2

Did you try other glyphs from that file?

3

Yes, I’ve tried other glyphs such as various weather icons. Same error. I’ve kept this example simple to illustrate the issue.

4

Have you tried like the manual says ?

\uf081

image
image781×494 59.8 KB

5

f081 is not f0081

6

Very true. That is a typo in my edited post. The yaml itself uses f0081.

7

Single quote, uppercase ?

'\U000F0081'
8

When I try single quotes, lower case f

‘\U000f0081’

The error is Found duplicate glyph: 0 (b’0’)

10

I think this is the solution. :smile:

  - file: &icon_font "fonts/materialdesignicons-webfont.ttf"
    id: icon_font_20
    size: 20
    glyphs: ''
    extras:
      - file: *icon_font
        glyphs: "\U000F0081"

And when i debug the yaml file with the validate i got the correct thing:

  - file:
      path: /root/config/fonts/materialdesignicons-webfont.ttf
      type: local
    id: icon_font_20
    size: 20
    glyphs:
      - ''
    extras:
      - file:
          path: /root/config/fonts/materialdesignicons-webfont.ttf
          type: local
        glyphs:
          - 󰂁
    glyphsets: []
    ignore_missing_glyphs: false
    bpp: 1
11

This is maddening. Every example I’ve seen leads me to believe it should work exactly as laid out, including in your (two) examples. I continue to get the error:

Font /config/esphome/fonts/materialdesignicons-webfont.ttf is missing 1 glyph: 󰂁 (b'\\U000f0081').

I have additionally created a brand new and simple ESPHome device with a minimal configuration and I still get the error.

This has to be some more systemic configuration setting somehow, but no amount of digging is turning up anything along those lines.

I greatly appreciate your ideas and I’m still in the hunt for a solution.

image
image1096×584 26.6 KB

12

Please don’t mix, my answers, just take my first box, not the validate function.

13

Download the font file from frequently updated source?

14

And check with like this python script you get the correct char.

curl -O https://unpkg.com/@mdi/[email protected]/fonts/materialdesignicons-webfont.ttf

file materialdesignicons-webfont.ttf
materialdesignicons-webfont.ttf: TrueType Font data, 11 tables (FontKit), 1st "GSUB", name offset 0x11e0c8

#!/usr/bin/env python3
from io import BytesIO
from PIL import Image, ImageDraw, ImageFont
img = Image.new("RGB", (200, 200), color="white")
draw = ImageDraw.Draw(img)
font = ImageFont.truetype("materialdesignicons-webfont.ttf", 100)
draw.text((50, 40), "\U000f0081", fill="black", font=font)
buffer = BytesIO()
img.save(buffer, format="PNG")
buffer.seek(0)
Image.open(buffer).show()