Custom Font a mobilfejlesztésben — mi ez, formátumok és alkalmazás

Mi az a Custom Font?

Custom Font (egyéni betűtípus) — egy betűképfájl, amely nem része az operációs rendszer szabványos betűtípuskészletének. A fejlesztők ilyen betűtípusokat adnak a projekthez az egyedi, márkához illő tipográfia érdekében. Az egyéni betűtípusok lehetnek fizetős kereskedelmi betűtípusok és ingyenes nyílt forráskódú betűtípusok is, például Inter, Montserrat, Roboto (egyéni verzió).

Az egyéni betűtípusok tipikus felhasználási forgatókönyvei: márkaalkalmazások logói és címei, olvasóalkalmazások speciális tipográfiai követelményekkel, tematikus betűtípusokat használó játékok, nem latin nyelvű alkalmazások, ahol a rendszerbetűtípus nem támogatja a szükséges glifákat. A Google Fonts adatai szerint a top-100 alkalmazás több mint 60%-a személyre szabja a betűtípusokat a vizuális differenciálás érdekében.

Miért van szükség egyéni betűtípusokra

A rendszerbetűtípusok (San Francisco iOS-ben, Roboto Androidban) az interfészekhez optimalizáltak, de nem alkalmasak a márka tipográfiájára. Az egyéni betűtípus erősíti a márka felismerhetőségét, tartalmazhat speciális szimbólumokat (ikon betűtípusok), és javítja az olvashatóságot bizonyos célcsoportok számára. A különböző betűtípusok túlzott használata azonban rontja a felhasználói élményt — ajánlott legfeljebb 2-3 család alkalmazásonként.

Betűtípus-formátumok mobilalkalmazásokhoz

A mobilplatformok több betűtípus-formátumot támogatnak. TrueType (TTF) — a legelterjedtebb formátum, kompatibilis az iOS és Android összes verziójával. OpenType (OTF) — a TTF kiterjesztése ligatúrák, alternatív glifák és OpenType funkciók támogatásával. Mindkét formátum .ttf és .otf kiterjesztéssel rendelkezik, és azonos módon működik a mobilplatformokon.

WOFF2 (Web Open Font Format 2) — tömörített formátum a webhez, Android 10-es verziójától támogatott. A WOFF2 30-50%-os tömörítést biztosít a TTF-hez képest. iOS esetében a WOFF2 a Safari-n keresztül támogatott, de natív alkalmazásokban TTF/OTF formátumba kell konvertálni. A Variable Fonts (variábilis betűtípusok) — modern formátum, amely egyetlen fájlban tárolja az összes stílust.

Mobilfejlesztéshez ajánlott az OTF használata elsődleges formátumként — ugyanolyan méretben támogatja az OpenType funkciókat, mint a TTF. Az APK-ban való helytakarékosság érdekében használjon woff2 tömörítést vagy igény szerinti betűtípus-betöltést.

Egyéni betűtípusok csatlakoztatása iOS-ben

Az egyéni betűtípus csatlakoztatásának folyamata iOS-ben két lépésből áll: a fájl hozzáadása a projekt bundle-jához és regisztráció az Info.plist-ben. A betűtípusfájl a projekt könyvtárába (általában Resources/Fonts) kerül, és bekerül a target-be. Az Info.plist-be hozzáadásra kerül a UIAppFonts (Fonts provided by application) tömb a betűtípusfájlok neveivel, a kiterjesztéssel együtt.

A regisztráció után a betűtípus a UIFont(name:size:) segítségével érhető el a PostScript-név alatt. A PostScript-név a UIFont.familyNames és UIFont.fontNames(forFamilyName:) segítségével tudható meg. Ha a név helytelen, a UIFont(name:size:) nil-t ad vissza. Hibakereséshez ajánlott az összes regisztrált betűtípus megjelenítése a képernyőn az első indításkor.

Csatlakoztatási példa

Vizsgáljuk meg a Montserrat betűtípus csatlakoztatásának teljes ciklusát egy Swift-ben írt iOS-projektben. A Montserrat-Regular.ttf fájl hozzáadódik a projekthez, megadásra kerül az Info.plist-ben, majd betöltődik a UIFont-on keresztül, és alkalmazásra kerül egy UILabel-re. Minden stílushoz (regular, bold, italic) külön fájl és külön bejegyzés kerül az Info.plist-be.

// 1. Az Info.plist-ben: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Töltse be a betűtípust a kódban
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // visszaesés a rendszerbetűtípusra
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Használja NSAttributedString-ben
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

A betűtípus betöltetlen állapotának kezelése (UIFont nil-t ad vissza) kötelező. Az alkalmazás összeomlása helyett használja a rendszerbetűtípust fallback-ként. Ez különösen fontos a hálózatról betöltött vagy opcionális modulokhoz hozzáadott betűtípusok esetében.

Dinamikus betöltés CTFontManager segítségével

Az igény szerint letöltött betűtípusokhoz a CTFontManagerRegisterGraphicsFont használatos. Ez a metódus regisztrálja a betűtípust a memóriában lévő adatokból (Data), és elérhetővé teszi a UIFont számára. Használat után a betűtípus a CTFontManagerUnregisterGraphicsFont segítségével törölhető a regisztrációból. A dinamikus betöltés hasznos a nagy betűtípuskészlettel rendelkező alkalmazásoknál, ahol nem mindegyikre van szükség egyszerre.

Egyéni betűtípusok csatlakoztatása Androidban

Androidban az egyéni betűtípusok a res/font erőforrásrendszeren keresztül kerülnek hozzáadásra. A TTF vagy OTF fájlok a res/font/ mappába kerülnek, majd XML Font Family erőforrások jönnek létre a stílusok csoportosításához. Android 8.0-tól (API 26) kezdve ez az egyetlen ajánlott módszer. Régebbi verziókhoz az assets és a Typeface.createFromAsset használatos.

Az XML Font Family leírja a stílus (regular, bold, italic) és a betűtípusfájl közötti megfelelést. Az XML jelölésben az android:fontFamily="@font/my_font" attribútum automatikusan kiválasztja a megfelelő fájlt a setTypeface hívásakor a hozzá tartozó stílussal. Ez leegyszerűsíti a tipográfiát — elég megadni a családot a témában, és az Android maga választja ki a bold-ot a setTypeface(textView, Typeface.BOLD) hívásakor.

Font Family létrehozása

Hozzon létre egy XML-fájlt a res/font/my_font.xml helyen, ahol az összes betűtípusfájl fel van sorolva a különböző stílusokhoz. Minden elem rendelkezik fontStyle (normal/italic) és fontWeight (100-900) attribútumokkal. Ezt követően a jelölésben adja meg az android:fontFamily="@font/my_font" értéket. A textStyle="bold" használatakor az Android automatikusan kiválasztja a 700-as fontWeight-vel rendelkező fájlt.

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

A Font Family használatakor az erőforrás-módszer automatikusan gyorsítótárazza a betűtípusokat és kiválasztja a megfelelő stílust. Ha a szükséges súly hiányzik a családból, az Android a legközelebbi elérhetőből szintetizálja azt. A betűtípus pontos vezérléséhez használja a Typeface.create() függvényt a fájl kifejezett megadásával.

Csatlakoztatás Flutter és React Native környezetben

A többplatformos keretrendszerekben a betűtípusok csatlakoztatása egységesített. A Flutter a pubspec.yaml fájlt használja a betűtípusok megadásához: a fájlok a projekt fonts/ mappájába kerülnek, majd deklarálásra kerülnek a fonts szekcióban a család és stílusok megadásával. Ezután a betűtípus a TextStyle(fontFamily: 'Montserrat') segítségével vagy az alkalmazás témájában kerül alkalmazásra. A Flutter támogatja a TTF és OTF formátumokat.

A React Native két megközelítést használ: natívat (Info.plist-en és res/font-on keresztül) vagy a react-native-vector-icons és @expo-google-fonts könyvtárakon keresztül. Az Expo leegyszerűsíti a folyamatot — a betűtípusok az expo-font segítségével töltődnek be: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). A React Navigation és a témák lehetővé teszik a betűtípus globális beállítását.

Példa Flutterben

Betűtípusok deklarálása a pubspec.yaml-ben és alkalmazása a MaterialApp témájában. A Montserrat-Regular.ttf és Montserrat-Bold.ttf fájlok a fonts/ mappába kerülnek. A deklarálás után a betűtípus a TextStyle segítségével az egész alkalmazásban elérhető. A Flutter automatikusan a bold fájlt használja a fontWeight: FontWeight.bold esetén.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Használat a témában
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Ha a Flutter nem találja a betűtípust a megadott útvonalon, az alkalmazás hiba nélkül használja a rendszer fallback betűtípust. Hibakereséshez kapcsolja be a checkConsistency-t a MaterialApp-ban — ez ellenőrzi a betűtípusok elérhetőségét és figyelmeztetéseket jelenít meg a konzolban hiány esetén.

Betűtípusok méretének optimalizálása

Az APK és IPA mérete közvetlenül függ a beépített betűtípusok számától. Egy TTF fájl 50-500 KB-ot nyom a latin karakterkészlethez, és akár 2-5 MB-ot a cirill, kínai karakterek vagy más kiterjesztett készletek támogatásával rendelkező betűtípusok esetében. Tíz betűtípus 10-20 MB-ot adhat hozzá az alkalmazás méretéhez, ami kritikus a mobilos letöltés szempontjából.

Optimalizáláshoz használja a subsetting eljárást — a nem használt karakterek eltávolítását a betűtípusfájlból. Az olyan eszközök, mint a glyphhanger, fonttools (pyftsubset) és Google Webfont Optimizer, csak a szükséges glifákat (latin + cirill + számok + írásjelek) tartalmazó verziót hozzák létre. Ez 50-80%-kal csökkenti a méretet. iOS-ben használhatók igény szerinti erőforrások azokhoz a betűtípusokhoz, amelyekre az első indításkor nincs szükség.

Variábilis betűtípusok

A Variable Font (variábilis betűtípus) — egy olyan fájl, amely az összes stílust tartalmazza: a Thin-től a Black-ig és a Condensed-től az Expanded-ig. Egy variábilis betűtípus 10-20 különálló, különböző súlyú fájlt helyettesíthet. Egy ilyen fájl mérete körülbelül 1-2 statikus fájlnak felel meg. Támogatás: iOS 11+, Android 10+, Flutter (FontVariation segítségével), React Native (egyéni könyvtárak segítségével).

Tömörítés és igény szerinti betöltés

Használja a WOFF2 formátumot a betűtípusok méretének 30-50%-os csökkentéséhez. API 29-es Androidban a WOFF2 közvetlenül használható. iOS esetében a WOFF2-t TTF formátumba kell konvertálni a regisztráció előtt. Azokat a betűtípusokat, amelyeket csak az onboarding során vagy bizonyos képernyőkön használnak, igény szerinti erőforrásokon (iOS) vagy Dynamic Feature (Android) keresztül töltse be — ezek nem kerülnek be az alap APK-ba.

Teljesítmény és bevált gyakorlatok

Az egyéni betűtípusok kétféleképpen befolyásolják a teljesítményt: betöltési idő és memória. A betűtípus első hivatkozásakor a rendszer beolvassa a fájlt a lemezről, elemzi a betűtípus tábláit, és belső struktúrákat hoz létre a rendereléshez. Egy 1 MB méretű betűtípus esetében ez 20-50 ms-ig tart. A gyorsítótárazás az első betöltés után megszünteti a késleltetést az ismételt hivatkozásoknál.

Memória: minden betöltött betűtípus a folyamat gyorsítótárában tárolódik. A rendszerbetűtípusok előre be vannak töltve, az egyéni betűtípusok az első használatkor töltődnek be. A memóriában a betűtípus körülbelül 2-3-szor több helyet foglal, mint a lemezen, a felbontott struktúrák miatt: cmap, glyf, head, hmtx táblák. 5 közepes méretű egyéni betűtípushoz (teljes térfogat 3 MB) körülbelül 6-9 MB RAM szükséges.

Ajánlások

Korlátozza az egyéni betűtípusok számát 2-3 családra alkalmazásonként. Használjon variábilis betűtípusokat több stílus helyettesítésére. Alkalmazzon rendszerbetűtípusokat az UI-elemekhez (gombok, címkék, listák), és egyéni betűtípusokat csak az akcentus tipográfiához (címek, banner-ek). Gyorsítótárazza a Typeface-t Androidban Map segítségével, az UIFont-ot iOS-ben pedig statikus változók segítségével.

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

A Typeface betöltése az onBindViewHolder-ban csak gyorsítótár jelenlétében megengedett. Gyorsítótár nélkül minden createFromAsset hívás új objektumot hoz létre és beolvassa a fájlt a lemezről. A RecyclerView görgetésekor ez észrevehető lemaradásokat okoz. A gyorsítótár megoldja a problémát, mivel a betűtípus egyszer töltődik be és újra felhasználásra kerül.