Custom Font in der mobilen Entwicklung — was es ist, Formate und Verwendung

Was ist eine Custom Font?

Custom Font (benutzerdefinierte Schriftart) ist eine Schriftdatei, die nicht zum Standardschriftartensatz des Betriebssystems gehört. Entwickler fügen solche Schriftarten zu ihren Projekten hinzu, um eine einzigartige, markenkonforme Typografie zu erzielen. Benutzerdefinierte Schriftarten können sowohl kostenpflichtige kommerzielle Schriften als auch kostenlose Open-Source-Schriften wie Inter, Montserrat oder eine benutzerdefinierte Version von Roboto sein.

Typische Anwendungsfälle für benutzerdefinierte Schriftarten sind: Marken-App-Logos und Überschriften, Lese-Apps mit spezifischen typografischen Anforderungen, Spiele mit thematischen Schriftarten und Anwendungen für nicht-lateinische Sprachen, bei denen die Systemsymbol die erforderlichen Glyphen nicht unterstützt. Laut Google Fonts passen mehr als 60 % der Top-100-Apps ihre Schriftarten zur visuellen Differenzierung an.

Warum benutzerdefinierte Schriftarten benötigt werden

Systemschriftarten (San Francisco auf iOS, Roboto auf Android) sind für Schnittstellen optimiert, aber nicht für die Markentypografie geeignet. Eine benutzerdefinierte Schriftart stärkt die Markenwiedererkennung, kann Sonderzeichen (Symbolschriften) enthalten und verbessert die Lesbarkeit für bestimmte Zielgruppen. Die übermäßige Verwendung verschiedener Schriftarten beeinträchtigt jedoch die Benutzererfahrung — es wird empfohlen, nicht mehr als 2–3 Familien pro Anwendung zu verwenden.

Schriftformate für mobile Anwendungen

Mobile Plattformen unterstützen mehrere Schriftformate. TrueType (TTF) ist das gebräuchlichste Format, das mit allen Versionen von iOS und Android kompatibel ist. OpenType (OTF) ist eine Erweiterung von TTF mit Unterstützung für Ligaturen, alternative Glyphen und OpenType-Funktionen. Beide Formate haben die Erweiterungen .ttf und .otf und funktionieren auf mobilen Plattformen identisch.

WOFF2 (Web Open Font Format 2) ist ein komprimiertes Format für das Web, das ab Android Version 10 unterstützt wird. WOFF2 bietet eine Komprimierung von 30–50 % im Vergleich zu TTF. Für iOS wird WOFF2 über Safari unterstützt, native Anwendungen benötigen jedoch eine Konvertierung in TTF/OTF. Variable Schriftarten (Variable Fonts) sind ein modernes Format, das alle Gewichtungen in einer einzigen Datei speichert.

Für die mobile Entwicklung wird die Verwendung von OTF als primäres Format empfohlen — es unterstützt OpenType-Funktionen bei gleicher Größe wie TTF. Um APK-Speicherplatz zu sparen, verwenden Sie Komprimierung über woff2 oder bedarfsgesteuertes Laden von Schriftarten.

Integration benutzerdefinierter Schriftarten in iOS

Der Prozess der Integration einer benutzerdefinierten Schriftart in iOS besteht aus zwei Schritten: Hinzufügen der Datei zum Projektbundle und Registrieren in der Info.plist. Die Schriftdatei wird im Projektverzeichnis (normalerweise Resources/Fonts) abgelegt und in das Target aufgenommen. In der Info.plist wird ein UIAppFonts-Array (Fonts provided by application) mit den Schriftdateinamen einschließlich Erweiterung hinzugefügt.

Nach der Registrierung ist die Schriftart über UIFont(name:size:) mit ihrem PostScript-Namen zugänglich. Der PostScript-Name kann über UIFont.familyNames und UIFont.fontNames(forFamilyName:) ermittelt werden. Wenn der Name falsch ist, gibt UIFont(name:size:) nil zurück. Zur Fehlersuche empfiehlt es sich, beim ersten Start alle registrierten Schriftarten auf dem Bildschirm anzuzeigen.

Integrationsbeispiel

Lassen Sie uns den vollständigen Zyklus der Integration der Schriftart Montserrat in ein iOS-Projekt in Swift durchgehen. Die Datei Montserrat-Regular.ttf wird zum Projekt hinzugefügt, in der Info.plist deklariert, dann über UIFont geladen und auf ein UILabel angewendet. Jede Gewichtung (regular, bold, italic) erfordert eine separate Datei und einen separaten Eintrag in der Info.plist.

// 1. In Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Schriftart im Code laden
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // auf Systemschriftart zurückfallen
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. In NSAttributedString verwenden
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Die Behandlung des Falls, wenn die Schriftart nicht geladen wird (UIFont nil zurückgibt), ist obligatorisch. Verwenden Sie anstelle eines Absturzes der Anwendung die Systemschriftart als Fallback. Dies ist besonders wichtig für Schriftarten, die aus dem Netzwerk geladen oder zu optionalen Modulen hinzugefügt werden.

Dynamisches Laden über CTFontManager

Für bei Bedarf heruntergeladene Schriftarten wird CTFontManagerRegisterGraphicsFont verwendet. Diese Methode registriert eine Schriftart aus Daten im Speicher (Data) und macht sie für UIFont verfügbar. Nach der Verwendung kann die Schriftart über CTFontManagerUnregisterGraphicsFont abgemeldet werden. Das dynamische Laden ist nützlich für Anwendungen mit einem großen Schriftartensatz, bei denen nicht alle sofort benötigt werden.

Integration benutzerdefinierter Schriftarten in Android

Unter Android werden benutzerdefinierte Schriftarten über das Ressourcensystem res/font hinzugefügt. TTF- oder OTF-Dateien werden in res/font/ abgelegt, anschließend werden XML Font Family-Ressourcen zur Gruppierung der Gewichtungen erstellt. Ab Android 8.0 (API 26) ist dies die einzig empfohlene Methode. Für ältere Versionen werden assets und Typeface.createFromAsset verwendet.

Eine XML Font Family beschreibt die Zuordnung zwischen einer Gewichtung (regular, bold, italic) und einer Schriftdatei. Im XML-Layout wählt das Attribut android:fontFamily="@font/my_font" automatisch die richtige Datei aus, wenn setTypeface mit dem entsprechenden Stil aufgerufen wird. Dies vereinfacht die Typografie — geben Sie einfach die Familie im Thema an, und Android wählt automatisch die fette Version aus, wenn setTypeface(textView, Typeface.BOLD) aufgerufen wird.

Erstellen einer Font Family

Erstellen Sie eine XML-Datei unter res/font/my_font.xml, die alle Schriftdateien für verschiedene Gewichtungen auflistet. Jedes Element hat die Attribute fontStyle (normal/italic) und fontWeight (100–900). Geben Sie dann im Layout android:fontFamily="@font/my_font" an. Wenn textStyle="bold" verwendet wird, wählt Android automatisch die Datei mit fontWeight 700 aus.

<!-- res/font/my_font.xml -->
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font
        android:fontStyle="normal"
        android:fontWeight="400"
        app:font="@font/my_font_regular" />
    <font
        android:fontStyle="normal"
        android:fontWeight="700"
        app:font="@font/my_font_bold" />
</font-family>

Bei Verwendung der Font Family speichert der Ressourcenansatz Schriftarten automatisch zwischen und wählt die richtige Gewichtung aus. Fehlt die erforderliche Gewichtung in der Familie, synthetisiert Android sie aus der nächstgelegenen verfügbaren. Für eine präzise Kontrolle über die Schriftart verwenden Sie Typeface.create() mit einem expliziten Dateiverweis.

Integration in Flutter und React Native

In plattformübergreifenden Frameworks ist die Schriftartintegration vereinheitlicht. Flutter verwendet pubspec.yaml zum Deklarieren von Schriftarten: Dateien werden im fonts/-Ordner des Projekts abgelegt und dann im Abschnitt fonts mit Familie und Gewichtungen aufgelistet. Die Schriftart wird dann über TextStyle(fontFamily: 'Montserrat') oder im App-Design angewendet. Flutter unterstützt TTF und OTF.

React Native verwendet zwei Ansätze: nativ (über Info.plist und res/font) oder über Bibliotheken wie react-native-vector-icons und @expo-google-fonts. Expo vereinfacht den Prozess — Schriftarten werden über expo-font geladen: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation und Designs ermöglichen das globale Festlegen einer Schriftart.

Beispiel in Flutter

Deklaration von Schriftarten in pubspec.yaml und Anwendung im MaterialApp-Design. Die Dateien Montserrat-Regular.ttf und Montserrat-Bold.ttf werden in fonts/ abgelegt. Nach der Deklaration ist die Schriftart über TextStyle in der gesamten Anwendung zugänglich. Flutter verwendet automatisch die fette Datei, wenn fontWeight: FontWeight.bold angegeben ist.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Verwendung im Design
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Wenn Flutter keine Schriftart unter dem angegebenen Pfad findet, verwendet die Anwendung fehlerfrei die System-Fallback-Schriftart. Aktivieren Sie zur Fehlersuche checkConsistency in MaterialApp — es überprüft die Schriftartverfügbarkeit und gibt Warnungen auf der Konsole aus, wenn Schriftarten fehlen.

Optimierung der Schriftgröße

Die APK- und IPA-Größe hängt direkt von der Anzahl der enthaltenen Schriftarten ab. Eine einzelne TTF-Datei wiegt 50–500 KB für den lateinischen Zeichensatz und bis zu 2–5 MB für Schriftarten mit Unterstützung für Kyrillisch, CJK-Zeichen oder andere erweiterte Sätze. Zehn Schriftarten können 10–20 MB zur Anwendungsgröße hinzufügen, was für mobile Downloads kritisch ist.

Zur Optimierung verwenden Sie Subsetting — das Entfernen ungenutzter Zeichen aus der Schriftdatei. Tools wie glyphhanger, fonttools (pyftsubset) und Google Webfont Optimizer erstellen eine Version der Schriftart nur mit den benötigten Glyphen (Lateinisch + Kyrillisch + Ziffern + Satzzeichen). Dies reduziert die Größe um 50–80 %. Unter iOS können bei Bedarf Ressourcen für Schriftarten verwendet werden, die beim ersten Start nicht benötigt werden.

Variable Schriftarten

Eine variable Schriftart (Variable Font) ist eine einzelne Datei, die alle Gewichtungen von Thin bis Black und von Condensed bis Expanded enthält. Eine variable Schriftart kann 10–20 separate Dateien mit unterschiedlichen Gewichtungen ersetzen. Die Größe einer solchen Datei entspricht in etwa 1–2 statischen Dateien. Unterstützung: iOS 11+, Android 10+, Flutter (über FontVariation), React Native (über benutzerdefinierte Bibliotheken).

Komprimierung und bedarfsgesteuertes Laden

Verwenden Sie WOFF2, um die Schriftgröße um 30–50 % zu reduzieren. Unter Android mit API 29 kann WOFF2 direkt verwendet werden. Für iOS muss WOFF2 vor der Registrierung in TTF konvertiert werden. Schriftarten, die nur während des Onboardings oder auf bestimmten Bildschirmen verwendet werden, sollten über bedarfsgesteuerte Ressourcen (iOS) oder Dynamic Feature (Android) geladen werden — sie werden nicht in die Basis-APK aufgenommen.

Leistung und Best Practices

Benutzerdefinierte Schriftarten beeinflussen die Leistung auf zwei Arten: Ladezeit und Speicher. Beim ersten Zugriff liest das System die Datei von der Festplatte, analysiert die Schriftarttabellen und erstellt interne Strukturen für das Rendering. Für eine 1 MB große Schriftart dauert dies 20–50 ms. Das Zwischenspeichern nach dem ersten Laden beseitigt die Verzögerung bei nachfolgenden Zugriffen.

Speicher: Jede geladene Schriftart wird im Prozess-Cache gespeichert. Systemschriftarten sind vorab geladen; benutzerdefinierte Schriftarten werden bei der ersten Verwendung geladen. Im Speicher belegt eine Schriftart aufgrund der analysierten Strukturen etwa 2–3 Mal mehr Platz als auf der Festplatte: Tabellen cmap, glyf, head, hmtx. Für 5 benutzerdefinierte Schriftarten mittlerer Größe (insgesamt 3 MB) werden etwa 6–9 MB RAM benötigt.

Empfehlungen

Beschränken Sie benutzerdefinierte Schriftarten auf 2–3 Familien pro Anwendung. Verwenden Sie variable Schriftarten, um mehrere Gewichtungen zu ersetzen. Wenden Sie Systemschriftarten für UI-Elemente (Schaltflächen, Beschriftungen, Listen) an und benutzerdefinierte Schriftarten nur für Akzent-Typografie (Überschriften, Banner). Zwischenspeichern Sie Typeface unter Android über eine Map und UIFont unter iOS über statische Variablen.

object FontCache {
    private val cache = mutableMapOf<String, Typeface>()
    fun get(context: Context, fontId: Int): Typeface {
        return cache.getOrPut(fontId.toString()) {
            ResourcesCompat.getFont(context, fontId)
        }
    }
}
// Verwendung in RecyclerView
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.typeface = FontCache.get(context, R.font.montserrat_regular)
}

Das Laden von Typeface in onBindViewHolder ist nur mit Zwischenspeicherung akzeptabel. Ohne Cache erstellt jeder createFromAsset-Aufruf ein neues Objekt und liest die Datei von der Festplatte. Beim Scrollen von RecyclerView führt dies zu spürbaren Verzögerungen. Der Cache löst das Problem, da die Schriftart einmal geladen und wiederverwendet wird.