Font Conversion

Anleitung zur Konvertierung eigener Schriftarten für das E-Paper Display.

Überblick

Das GxEPD2 Display verwendet Adafruit GFX Fonts im .h Format. Das Projekt nutzt GothamRnd-Bold in verschiedenen Größen.

Verwendete Fonts

Font	Größe	Verwendung
GothamRnd_Bold12pt7b	12pt	Details, Footer
GothamRnd_Bold18pt7b	18pt	Standard-Text, Forecast
GothamRnd_Bold24pt7b	24pt	Header
GothamRnd_Bold54pt7b	54pt	(Nicht verwendet)
GothamRnd_Bold72pt7b	72pt	Große Temperatur-Anzeige

Alle Fonts befinden sich in: weather-station/fonts/

fontconvert Tool

Adafruit stellt das fontconvert Tool bereit, um TrueType/OpenType Fonts zu konvertieren.

Tool kompilieren

cd weather-station/fonts/

# macOS
gcc fontconvert.c -o fontconvert

# Linux
gcc fontconvert.c -o fontconvert -lm

# Windows (mit MinGW)
gcc fontconvert.c -o fontconvert.exe -lm

Neue Font-Größe erstellen

./fontconvert GothamRnd-Bold.ttf 36 > GothamRnd_Bold36pt7b.h

Parameter: - GothamRnd-Bold.ttf - TTF/OTF Datei - 36 - Größe in Punkten - > ...pt7b.h - Output-Datei

Ausgabe prüfen

Die .h Datei enthält:

const uint8_t GothamRnd_Bold36pt7bBitmaps[] PROGMEM = {
  // Bitmap-Daten für alle Zeichen
};

const GFXglyph GothamRnd_Bold36pt7bGlyphs[] PROGMEM = {
  // Glyph-Metriken (Breite, Höhe, Offsets)
};

const GFXfont GothamRnd_Bold36pt7b PROGMEM = {
  // Font-Metadaten
};

Integration in Sketch

1. Font-Datei einbinden

#include <fonts/GothamRnd_Bold36pt7b.h>

2. Font verwenden

display.setFont(&GothamRnd_Bold36pt7b);
display.println("Text mit 36pt Font");

3. Textgröße berechnen

const char* text = "Hello";
int16_t x1, y1;
uint16_t w, h;

display.getTextBounds(text, 0, 0, &x1, &y1, &w, &h);

Serial.printf("Text-Breite: %d, Höhe: %d\n", w, h);

Eigene Fonts verwenden

1. TTF/OTF Datei besorgen

Quellen: - Google Fonts (kostenlos, Open Source) - Font Squirrel (lizenzfreie Fonts) - Eigene gekaufte Fonts

Lizenz prüfen

Lizenz der Schriftart beachten! Nicht alle Fonts dürfen in Hardware-Projekten verwendet werden.

2. Font konvertieren

cd weather-station/fonts/
./fontconvert /path/to/YourFont.ttf 18 > YourFont18pt7b.h

3. Im Sketch einbinden

#include "YourFont18pt7b.h"

// ...

display.setFont(&YourFont18pt7b);

Font-Größen wählen

Lesbarkeit auf E-Paper

E-Paper hat ~150 DPI Auflösung. Empfohlene Größen:

Verwendung	Empfohlene Größe
Sehr kleiner Text	9-12pt
Normaler Text	14-18pt
Überschriften	20-24pt
Große Zahlen	48-72pt

Speicherverbrauch

Größere Fonts = mehr Flash-Speicher:

GothamRnd_Bold12pt: ~8 KB
GothamRnd_Bold18pt: ~12 KB
GothamRnd_Bold24pt: ~18 KB
GothamRnd_Bold72pt: ~80 KB

ESP32 Flash: 4MB → Speicher ist normalerweise kein Problem

Zeichensätze

Standard (ASCII)

fontconvert erstellt standardmäßig nur ASCII-Zeichen (32-126): - Buchstaben: a-z, A-Z - Zahlen: 0-9 - Sonderzeichen: !, @, #, etc.

Deutsche Umlaute

Problem: Standard-Konvertierung enthält keine Umlaute (ä, ö, ü, ß)

Lösung 1: ASCII-Ersatz (verwendet im Projekt)

String convertUmlautsToAscii(String text) {
  text.replace("ä", "ae");
  text.replace("ö", "oe");
  text.replace("ü", "ue");
  text.replace("ß", "ss");
  return text;
}

Lösung 2: Extended ASCII

# Erweiterten Zeichensatz konvertieren (32-255)
./fontconvert Font.ttf 18 32 255 > Font18pt7b.h

Lösung 3: UTF-8 Library verwenden - Adafruit_GFX_UTF8 - Komplexer, aber vollständige UTF-8 Unterstützung

Monospace vs. Proportional

Proportional (Standard)

Jedes Zeichen hat eigene Breite: - "i" ist schmaler als "W" - Sieht natürlicher aus - Schwieriger für Spalten-Layouts

Monospace

Alle Zeichen gleich breit: - Gut für Tabellen - Einfacher zu positionieren - Beispiel: Courier, Roboto Mono

./fontconvert RobotoMono-Regular.ttf 18 > RobotoMono18pt7b.h

Advanced: Custom Glyphs

Nur bestimmte Zeichen konvertieren

Für weniger Speicherverbrauch:

// Modifikation in fontconvert.c nötig
// Nur Zahlen 0-9 und Grad-Symbol
first = '0';  // ASCII 48
last = '9';   // ASCII 57

Neu kompilieren und ausführen.

Icon-Fonts

Auch Icon-Fonts (z.B. Font Awesome) können konvertiert werden:

./fontconvert FontAwesome-Solid.ttf 24 > FontAwesome24pt7b.h

Problem: Unicode-Zeichen müssen manuell gemappt werden.

Troubleshooting

"fontconvert: command not found"

chmod +x fontconvert  # Ausführbar machen
./fontconvert         # Mit ./ ausführen

"Compilation error"

GCC fehlt:

# macOS
xcode-select --install

# Ubuntu/Debian
sudo apt install build-essential

# Windows
# MinGW installieren

"Invalid font file"

• TTF/OTF-Datei beschädigt
• Font-Datei nicht gefunden (Pfad prüfen)
• Nicht unterstütztes Format (nur TTF und OTF)

Zeichen fehlen im Display

• Font enthält diese Zeichen nicht
• Zeichensatz erweitern (siehe oben)
• Oder: ASCII-Ersatz verwenden

Text wird abgeschnitten

// Y-Position zu klein
display.setCursor(0, 20);  // Zu nah am oberen Rand

// Besser:
int16_t x1, y1;
uint16_t w, h;
display.getTextBounds(text, 0, 0, &x1, &y1, &w, &h);
display.setCursor(0, h);  // Genug Platz für Ascender

Beispiele

Minimaler Font-Test

#include <GxEPD2_BW.h>
#include <fonts/GothamRnd_Bold18pt7b.h>

void setup() {
  display.init();
  display.setRotation(1);
  display.setTextColor(GxEPD_BLACK);

  display.setFullWindow();
  display.firstPage();
  do {
    display.fillScreen(GxEPD_WHITE);

    display.setFont(&GothamRnd_Bold18pt7b);
    display.setCursor(50, 100);
    display.print("Font Test 18pt");

  } while (display.nextPage());
}

Verschiedene Größen

display.setFont(&GothamRnd_Bold12pt7b);
display.setCursor(10, 30);
display.print("12pt Text");

display.setFont(&GothamRnd_Bold18pt7b);
display.setCursor(10, 60);
display.print("18pt Text");

display.setFont(&GothamRnd_Bold24pt7b);
display.setCursor(10, 100);
display.print("24pt Text");

Weiterführend

• Adafruit GFX Graphics Library
• fontconvert Source
• Google Fonts

Geschrieben von Claude (http://claude.ai)