Custom Font sa mobile development — ano ito, mga format at paggamit

Ano ang Custom Font?

Custom Font (custom na font) — ay isang file na may typeface na hindi kasama sa standard set ng font ng operating system. Nagdaragdag ang mga developer ng ganitong mga font sa proyekto para sa kakaibang tipograpiya na naaayon sa brand. Ang custom na font ay maaaring parehong bayad na komersyal na typeface at libreng open-source font, halimbawa, Inter, Montserrat, Roboto (custom na bersyon).

Karaniwang senaryo ng paggamit ng custom na font: logo at heading ng brand app, reading app na may espesyal na pangangailangan sa tipograpiya, laro na may temang font, app para sa non-Latin na wika kung saan ang system font ay hindi sumusuporta sa kinakailangang glyph. Ayon sa datos ng Google Fonts, higit sa 60% ng top-100 app ay nag-customize ng font para sa visual na pagkakaiba-iba.

Bakit kailangan ang custom na font

Ang system font (San Francisco sa iOS, Roboto sa Android) ay na-optimize para sa interface, ngunit hindi angkop para sa brand tipograpiya. Ang custom na font ay nagpapalakas ng pagkilala sa brand, maaaring maglaman ng espesyal na simbolo (icon font) at nagpapabuti ng pagkabasa para sa partikular na audience. Gayunpaman, ang labis na paggamit ng iba't ibang font ay nagpapalala sa UX — inirerekomenda na hindi hihigit sa 2-3 pamilya bawat app.

Mga format ng font para sa mobile app

Sinusuportahan ng mobile platform ang ilang format ng font. TrueType (TTF) — pinakalaganap na format, katugma sa lahat ng bersyon ng iOS at Android. OpenType (OTF) — extension ng TTF na may suporta para sa ligature, alternatibong glyph, at feature ng OpenType. Ang parehong format ay may extension na .ttf at .otf at gumagana nang magkapareho sa mobile platform.

WOFF2 (Web Open Font Format 2) — naka-compress na format para sa web, sinusuportahan sa Android mula bersyon 10. Ang WOFF2 ay nagbibigay ng compression na 30-50% kumpara sa TTF. Para sa iOS, sinusuportahan ang WOFF2 sa pamamagitan ng Safari, ngunit sa native app ay kinakailangan ang conversion sa TTF/OTF. Variable Fonts (variable font) — modernong format na nag-iimbak ng lahat ng istilo sa isang file.

Para sa mobile development, inirerekomenda na gamitin ang OTF bilang pangunahing format — sinusuportahan ang feature ng OpenType sa parehong laki ng TTF. Para makatipid ng espasyo sa APK, gamitin ang compression sa pamamagitan ng woff2 o pag-load ng font on-demand.

Pagkonekta ng custom na font sa iOS

Ang proseso ng pagkonekta ng custom na font sa iOS ay binubuo ng dalawang hakbang: pagdaragdag ng file sa bundle ng proyekto at pagrehistro sa Info.plist. Ang font file ay inilalagay sa direktoryo ng proyekto (karaniwan ay Resources/Fonts) at kasama sa target. Sa Info.plist ay idinadagdag ang array na UIAppFonts (Fonts provided by application) na may mga pangalan ng font file, kasama ang extension.

Pagkatapos ng pagrehistro, ang font ay available sa pamamagitan ng UIFont(name:size:) sa ilalim ng pangalang PostScript. Ang pangalang PostScript ay malalaman sa pamamagitan ng UIFont.familyNames at UIFont.fontNames(forFamilyName:). Kung mali ang pangalan, ang UIFont(name:size:) ay nagbabalik ng nil. Para sa debugging, inirerekomenda na ipakita ang lahat ng narehistrong font sa screen sa unang paglunsad.

Halimbawa ng pagkonekta

Tingnan natin ang buong siklo ng pagkonekta ng font na Montserrat sa iOS project sa Swift. Ang file na Montserrat-Regular.ttf ay idinadagdag sa proyekto, tinutukoy sa Info.plist, pagkatapos ay nilo-load sa pamamagitan ng UIFont at inilalapat sa UILabel. Para sa bawat istilo (regular, bold, italic) ay idinadagdag ang hiwalay na file at hiwalay na entry sa Info.plist.

// 1. Sa Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. I-load ang font sa code
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // bumalik sa system font
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Gamitin sa NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Ang paghawak sa sitwasyon kung kailan hindi na-load ang font (UIFont ay nagbabalik ng nil) ay kinakailangan. Sa halip na pag-crash ng app, gamitin ang system font bilang fallback. Ito ay lalong mahalaga para sa font na nilo-load mula sa network o idinadagdag sa opsyonal na module.

Dynamic na pag-load sa pamamagitan ng CTFontManager

Para sa font na dina-download on-demand, ginagamit ang CTFontManagerRegisterGraphicsFont. Ang paraang ito ay nagrerehistro ng font mula sa data sa memorya (Data) at ginagawa itong available para sa UIFont. Pagkatapos gamitin, ang font ay maaaring i-unregister sa pamamagitan ng CTFontManagerUnregisterGraphicsFont. Ang dynamic na pag-load ay kapaki-pakinabang para sa app na may malaking set ng font kung saan hindi lahat ay kailangan nang sabay-sabay.

Pagkonekta ng custom na font sa Android

Sa Android, ang custom na font ay idinadagdag sa pamamagitan ng resource system na res/font. Ang TTF o OTF file ay inilalagay sa res/font/, pagkatapos ay ginagawa ang XML Font Family resource para sa pagpapangkat ng istilo. Mula Android 8.0 (API 26), ito ang tanging inirerekomendang paraan. Para sa lumang bersyon, ginagamit ang assets at Typeface.createFromAsset.

Ang XML Font Family ay naglalarawan ng katugma sa pagitan ng istilo (regular, bold, italic) at ng font file. Sa XML markup, ang attribute na android:fontFamily="@font/my_font" ay awtomatikong pumipili ng tamang file sa setTypeface na may kaukulang istilo. Pinapadali nito ang tipograpiya — sapat na na tukuyin ang pamilya sa tema, at awtomatikong pipiliin ng Android ang bold sa pagtawag ng setTypeface(textView, Typeface.BOLD).

Paglikha ng Font Family

Gumawa ng XML file sa res/font/my_font.xml, kung saan nakalista ang lahat ng font file para sa iba't ibang istilo. Bawat elemento ay may attribute na fontStyle (normal/italic) at fontWeight (100-900). Pagkatapos nito, sa markup ay tukuyin ang android:fontFamily="@font/my_font". Kapag gumagamit ng textStyle="bold", awtomatikong pipiliin ng Android ang file na may 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>

Kapag gumagamit ng Font Family, ang paraan ng resource ay awtomatikong nagke-cache ng font at pumipili ng tamang istilo. Kung ang kinakailangang weight ay wala sa pamilya, ito ay sine-synthesize ng Android mula sa pinakamalapit na available. Para sa tumpak na kontrol sa font, gamitin ang Typeface.create() na may eksplisitong pagtukoy ng file.

Pagkonekta sa Flutter at React Native

Sa cross-platform framework, ang pagkonekta ng font ay nagkakaisa. Flutter ay gumagamit ng pubspec.yaml para sa pagtukoy ng font: ang file ay inilalagay sa folder na fonts/ ng proyekto, pagkatapos ay idinedeklara sa seksyong fonts na may pagtukoy ng pamilya at istilo. Pagkatapos, ang font ay inilalapat sa pamamagitan ng TextStyle(fontFamily: 'Montserrat') o sa tema ng app. Sinusuportahan ng Flutter ang TTF at OTF.

React Native ay gumagamit ng dalawang approach: native (sa pamamagitan ng Info.plist at res/font) o sa pamamagitan ng library na react-native-vector-icons at @expo-google-fonts. Pinapadali ng Expo ang proseso — ang font ay nilo-load sa pamamagitan ng expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). Ang React Navigation at tema ay nagpapahintulot na itakda ang font nang global.

Halimbawa sa Flutter

Deklarasyon ng font sa pubspec.yaml at paglalapat sa tema ng MaterialApp. Ang file na Montserrat-Regular.ttf at Montserrat-Bold.ttf ay inilalagay sa fonts/. Pagkatapos ng deklarasyon, ang font ay available sa pamamagitan ng TextStyle sa buong app. Awtomatikong ginagamit ng Flutter ang bold file kapag fontWeight: FontWeight.bold.

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

Kung hindi mahanap ng Flutter ang font sa tinukoy na path, ang app ay gumagamit ng system fallback font nang walang error. Para sa debugging, i-activate ang checkConsistency sa MaterialApp — sinusuri nito ang availability ng font at nagpapakita ng babala sa console kapag wala.

Pag-optimize ng laki ng font

Ang laki ng APK at IPA ay direktang nakadepende sa bilang ng kasamang font. Isang TTF file ay tumitimbang ng 50-500 KB para sa Latin na character set at hanggang 2-5 MB para sa font na may suporta sa Cyrillic, Chinese character o iba pang extended set. Sampung font ay maaaring magdagdag ng 10-20 MB sa laki ng app, na kritikal para sa mobile download.

Para sa pag-optimize, gamitin ang subsetting — pag-alis ng hindi ginagamit na character mula sa font file. Ang tool tulad ng glyphhanger, fonttools (pyftsubset) at Google Webfont Optimizer ay gumagawa ng bersyon ng font na may kailangan lang na glyph (Latin + Cyrillic + numero + bantas). Binabawasan nito ang laki ng 50-80%. Sa iOS, maaaring gamitin ang on-demand resource para sa font na hindi kailangan sa unang paglunsad.

Variable font

Variable Font (variable font) — isang file na naglalaman ng lahat ng istilo: mula Thin hanggang Black at mula Condensed hanggang Expanded. Isang variable font ay maaaring pumalit sa 10-20 hiwalay na file na may iba't ibang weight. Ang laki ng naturang file ay humigit-kumulang katumbas ng 1-2 static na file. Suporta: iOS 11+, Android 10+, Flutter (sa pamamagitan ng FontVariation), React Native (sa pamamagitan ng custom library).

Compression at on-demand na pag-load

Gamitin ang WOFF2 para sa pagbawas ng laki ng font ng 30-50%. Sa Android na may API 29, maaaring gamitin ang WOFF2 nang direkta. Para sa iOS, kinakailangan i-convert ang WOFF2 sa TTF bago magrehistro. Ang font na ginagamit lang sa onboarding o sa partikular na screen, i-load sa pamamagitan ng on-demand resource (iOS) o Dynamic Feature (Android) — hindi sila mapupunta sa base APK.

Pagganap at pinakamahusay na kagawian

Ang custom na font ay nakakaapekto sa pagganap sa dalawang paraan: oras ng pag-load at memorya. Sa unang referensya sa font, binabasa ng system ang file mula sa disk, ini-parse ang table ng font, at gumagawa ng internal na istruktura para sa rendering. Para sa font na may laki na 1 MB, ito ay tumatagal ng 20-50 ms. Ang caching pagkatapos ng unang pag-load ay nag-aalis ng pagkaantala sa paulit-ulit na referensya.

Memorya: bawat nai-load na font ay iniimbak sa cache ng proseso. Ang system font ay pre-loaded, ang custom na font ay nilo-load sa unang paggamit. Sa memorya, ang font ay kumukuha ng humigit-kumulang 2-3 beses na mas marami kaysa sa disk, dahil sa na-parse na istruktura: cmap, glyf, head, hmtx table. Para sa 5 custom na font na may katamtamang laki (kabuuang volume 3 MB) ay kinakailangan ng humigit-kumulang 6-9 MB RAM.

Rekomendasyon

Limitahan ang bilang ng custom na font sa 2-3 pamilya bawat app. Gumamit ng variable font para sa pagpapalit ng maraming istilo. Ilapat ang system font para sa UI element (buton, label, listahan) at custom na font para lamang sa accent tipograpiya (heading, banner). I-cache ang Typeface sa Android sa pamamagitan ng Map, at UIFont sa iOS sa pamamagitan ng static na variable.

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

Ang pag-load ng Typeface sa onBindViewHolder ay pinapayagan lamang kung may cache. Kung walang cache, bawat tawag sa createFromAsset ay gumagawa ng bagong object at binabasa ang file mula sa disk. Kapag nag-scroll ng RecyclerView, ito ay nagdudulot ng kapansin-pansing lag. Nalulutas ng cache ang problema dahil ang font ay nilo-load nang isang beses at ginagamit muli.