Custom Font in mobiele ontwikkeling — wat is het, formaten en toepassing

Wat is Custom Font?

Custom Font (aangepast lettertype) — is een bestand met een lettertype dat geen deel uitmaakt van de standaard lettertypeset van het besturingssysteem. Ontwikkelaars voegen dergelijke lettertypen toe aan een project voor unieke typografie die past bij het merk. Aangepaste lettertypen kunnen zowel betaalde commerciële lettertypen als gratis open-source lettertypen zijn, zoals Inter, Montserrat, Roboto (aangepaste versie).

Typische scenario's voor het gebruik van aangepaste lettertypen: logo's en koppen van merkapps, leesapps met speciale typografie-eisen, games met thematische lettertypen, apps voor niet-Latijnse talen waar het systeemlettertype de benodigde glyphs niet ondersteunt. Volgens Google Fonts past meer dan 60% van de top-100 apps lettertypen aan voor visuele differentiatie.

Waarom zijn aangepaste lettertypen nodig

Systeemlettertypen (San Francisco op iOS, Roboto op Android) zijn geoptimaliseerd voor interfaces, maar niet geschikt voor merktopografie. Een aangepast lettertype versterkt de herkenbaarheid van het merk, kan speciale symbolen bevatten (icon-lettertypen) en verbetert de leesbaarheid voor specifieke doelgroepen. Overmatig gebruik van verschillende lettertypen verslechtert echter de UX — aanbevolen wordt niet meer dan 2-3 families per app.

Lettertypeformaten voor mobiele apps

Mobiele platforms ondersteunen verschillende lettertypeformaten. TrueType (TTF) — het meest verspreide formaat, compatibel met alle versies van iOS en Android. OpenType (OTF) — een uitbreiding van TTF met ondersteuning voor ligaturen, alternatieve glyphs en OpenType-functies. Beide formaten hebben de extensies .ttf en .otf en werken identiek op mobiele platforms.

WOFF2 (Web Open Font Format 2) — een gecomprimeerd formaat voor het web, ondersteund in Android vanaf versie 10. WOFF2 biedt compressie van 30-50% ten opzichte van TTF. Voor iOS wordt WOFF2 ondersteund via Safari, maar in native apps is conversie naar TTF/OTF vereist. Variable Fonts (variabele lettertypen) — een modern formaat dat alle stijlen in één bestand opslaat.

Voor mobiele ontwikkeling wordt aanbevolen OTF als primair formaat te gebruiken — het ondersteunt OpenType-functies bij dezelfde grootte als TTF. Gebruik woff2-compressie of on-demand laden om ruimte in APK te besparen.

Aangepaste lettertypen aansluiten in iOS

Het proces van het aansluiten van een aangepast lettertype in iOS bestaat uit twee stappen: het bestand toevoegen aan de projectbundle en registreren in Info.plist. Het lettertypebestand wordt in de projectmap (meestal Resources/Fonts) geplaatst en opgenomen in het target. In Info.plist wordt een array UIAppFonts (Fonts provided by application) toegevoegd met de namen van de lettertypebestanden, inclusief de extensie.

Na registratie is het lettertype beschikbaar via UIFont(name:size:) onder de PostScript-naam. De PostScript-naam kan worden achterhaald via UIFont.familyNames en UIFont.fontNames(forFamilyName:). Als de naam onjuist is, retourneert UIFont(name:size:) nil. Voor foutopsporing wordt aanbevolen alle geregistreerde lettertypen bij de eerste start op het scherm weer te geven.

Voorbeeld van aansluiten

Laten we de volledige cyclus van het aansluiten van het lettertype Montserrat in een iOS-project in Swift bekijken. Het bestand Montserrat-Regular.ttf wordt aan het project toegevoegd, gespecificeerd in Info.plist, vervolgens geladen via UIFont en toegepast op UILabel. Voor elke stijl (regular, bold, italic) wordt een apart bestand en een aparte vermelding in Info.plist toegevoegd.

// 1. In Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Laad lettertype in code
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // terugval op systeemlettertype
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Gebruik in NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Het afhandelen van de situatie waarin het lettertype niet is geladen (UIFont retourneert nil) is verplicht. Gebruik in plaats van een crash het systeemlettertype als fallback. Dit is vooral belangrijk voor lettertypen die uit het netwerk worden geladen of aan optionele modules worden toegevoegd.

Dynamisch laden via CTFontManager

Voor lettertypen die op verzoek worden gedownload, wordt CTFontManagerRegisterGraphicsFont gebruikt. Deze methode registreert een lettertype uit gegevens in het geheugen (Data) en maakt het beschikbaar voor UIFont. Na gebruik kan het lettertype worden gederegistreerd via CTFontManagerUnregisterGraphicsFont. Dynamisch laden is handig voor apps met een grote set lettertypen die niet allemaal tegelijk nodig zijn.

Aangepaste lettertypen aansluiten in Android

Op Android worden aangepaste lettertypen toegevoegd via het bronsysteem res/font. TTF- of OTF-bestanden worden in res/font/ geplaatst, waarna XML Font Family-bronnen worden gemaakt om stijlen te groeperen. Vanaf Android 8.0 (API 26) is dit de enige aanbevolen methode. Voor oudere versies worden assets en Typeface.createFromAsset gebruikt.

XML Font Family beschrijft de overeenkomst tussen stijl (regular, bold, italic) en het lettertypebestand. In XML-markup selecteert het attribuut android:fontFamily="@font/my_font" automatisch het juiste bestand bij setTypeface met de bijbehorende stijl. Dit vereenvoudigt de typografie — het is voldoende om de familie in het thema op te geven, en Android selecteert zelf bold bij de aanroep setTypeface(textView, Typeface.BOLD).

Font Family maken

Maak een XML-bestand in res/font/my_font.xml, waarin alle lettertypebestanden voor verschillende stijlen worden vermeld. Elk element heeft de attributen fontStyle (normal/italic) en fontWeight (100-900). Specificeer daarna in de markup android:fontFamily="@font/my_font". Bij gebruik van textStyle="bold" selecteert Android automatisch het bestand met fontWeight 700.

<!-- 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>

Bij gebruik van Font Family cacht de bronmethode automatisch lettertypen en selecteert de juiste stijl. Als het benodigde gewicht ontbreekt in de familie, synthetiseert Android het uit de dichtstbijzijnde beschikbare. Voor nauwkeurige controle over het lettertype gebruikt u Typeface.create() met expliciete vermelding van het bestand.

Aansluiten in Flutter en React Native

In cross-platform frameworks is het aansluiten van lettertypen geünificeerd. Flutter gebruikt pubspec.yaml voor het specificeren van lettertypen: bestanden worden in de map fonts/ van het project geplaatst, vervolgens gedeclareerd in de sectie fonts met opgave van familie en stijlen. Daarna wordt het lettertype toegepast via TextStyle(fontFamily: 'Montserrat') of in het thema van de app. Flutter ondersteunt TTF en OTF.

React Native gebruikt twee benaderingen: native (via Info.plist en res/font) of via de bibliotheken react-native-vector-icons en @expo-google-fonts. Expo vereenvoudigt het proces — lettertypen worden geladen via expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation en thema's maken het mogelijk het lettertype globaal in te stellen.

Voorbeeld in Flutter

Declaratie van lettertypen in pubspec.yaml en toepassing in het MaterialApp-thema. De bestanden Montserrat-Regular.ttf en Montserrat-Bold.ttf worden in fonts/ geplaatst. Na declaratie is het lettertype beschikbaar via TextStyle in de hele app. Flutter gebruikt automatisch het bold-bestand bij fontWeight: FontWeight.bold.

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

Als Flutter het lettertype niet vindt op het opgegeven pad, gebruikt de app zonder fouten het systeem fallback-lettertype. Voor foutopsporing schakelt u checkConsistency in MaterialApp in — dit controleert de beschikbaarheid van lettertypen en geeft waarschuwingen in de console bij afwezigheid.

Optimaliseren van lettertypegrootte

De grootte van APK en IPA is direct afhankelijk van het aantal meegeleverde lettertypen. Eén TTF-bestand weegt 50-500 KB voor de Latijnse karakterset en tot 2-5 MB voor lettertypen met ondersteuning voor Cyrillisch, Chinese karakters of andere uitgebreide sets. Tien lettertypen kunnen 10-20 MB toevoegen aan de app-grootte, wat kritisch is voor mobiel downloaden.

Gebruik voor optimalisatie subsetting — het verwijderen van ongebruikte karakters uit het lettertypebestand. Tools zoals glyphhanger, fonttools (pyftsubset) en Google Webfont Optimizer maken een versie van het lettertype met alleen de benodigde glyphs (Latijn + Cyrillisch + cijfers + leestekens). Dit verkleint de grootte met 50-80%. Op iOS kunnen on-demand bronnen worden gebruikt voor lettertypen die niet bij de eerste start nodig zijn.

Variabele lettertypen

Variable Font (variabel lettertype) — één bestand dat alle stijlen bevat: van Thin tot Black en van Condensed tot Expanded. Één variabel lettertype kan 10-20 afzonderlijke bestanden met verschillende gewichten vervangen. De grootte van zo'n bestand is ongeveer gelijk aan 1-2 statische bestanden. Ondersteuning: iOS 11+, Android 10+, Flutter (via FontVariation), React Native (via aangepaste bibliotheken).

Compressie en on-demand laden

Gebruik WOFF2 om de grootte van lettertypen met 30-50% te verminderen. Op Android met API 29 kan WOFF2 direct worden gebruikt. Voor iOS is conversie van WOFF2 naar TTF vereist vóór registratie. Lettertypen die alleen in onboarding of op bepaalde schermen worden gebruikt, laadt u via on-demand bronnen (iOS) of Dynamic Feature (Android) — ze komen niet in de basis-APK.

Prestaties en best practices

Aangepaste lettertypen beïnvloeden de prestaties op twee manieren: laadtijd en geheugen. Bij de eerste verwijzing naar een lettertype leest het systeem het bestand van schijf, parseert de lettertypetabellen en maakt interne structuren voor rendering. Voor een lettertype van 1 MB duurt dit 20-50 ms. Caching na het eerste laden elimineert vertraging bij herhaalde verwijzingen.

Geheugen: elk geladen lettertype wordt opgeslagen in de cache van het proces. Systeemlettertypen zijn vooraf geladen, aangepaste lettertype worden bij het eerste gebruik geladen. In het geheugen neemt een lettertype ongeveer 2-3 keer meer ruimte in dan op schijf, vanwege de geparseerde structuren: cmap-, glyf-, head-, hmtx-tabellen. Voor 5 aangepaste lettertypen van gemiddelde grootte (totaalvolume 3 MB) is ongeveer 6-9 MB RAM nodig.

Aanbevelingen

Beperk het aantal aangepaste lettertypen tot 2-3 families per app. Gebruik variabele lettertypen om meerdere stijlen te vervangen. Pas systeemlettertypen toe voor UI-elementen (knoppen, labels, lijsten) en alleen aangepaste voor accenttypografie (koppen, banners). Cache Typeface op Android via een Map, en UIFont op iOS via statische variabelen.

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

Het laden van Typeface in onBindViewHolder is alleen toegestaan met cache. Zonder cache creëert elke aanroep van createFromAsset een nieuw object en leest het bestand van schijf. Bij het scrollen van RecyclerView veroorzaakt dit merkbare vertragingen. Cache lost het probleem op omdat het lettertype eenmalig wordt geladen en hergebruikt.