Custom Font di pengembangan seluler — apa itu, format dan penerapan

Apa itu Custom Font?

Custom Font (font khusus) — adalah file dengan huruf yang tidak termasuk dalam set font standar sistem operasi. Pengembang menambahkan font semacam itu ke proyek untuk tipografi unik yang sesuai dengan merek. Font khusus dapat berupa font komersial berbayar maupun font open-source gratis, misalnya Inter, Montserrat, Roboto (versi khusus).

Skenario tipikal penggunaan font khusus: logo dan judul aplikasi merek, aplikasi baca dengan persyaratan tipografi khusus, game dengan font tematik, aplikasi untuk bahasa non-Latin di mana font sistem tidak mendukung glyph yang diperlukan. Menurut data Google Fonts, lebih dari 60% aplikasi di top-100 menyesuaikan font untuk diferensiasi visual.

Mengapa font khusus diperlukan

Font sistem (San Francisco di iOS, Roboto di Android) dioptimalkan untuk antarmuka, tetapi tidak cocok untuk tipografi merek. Font khusus memperkuat pengenalan merek, dapat berisi simbol khusus (font ikon) dan meningkatkan keterbacaan untuk audiens tertentu. Namun, penggunaan berlebihan berbagai font memperburuk UX — disarankan tidak lebih dari 2-3 famili per aplikasi.

Format font untuk aplikasi seluler

Platform seluler mendukung beberapa format font. TrueType (TTF) — format yang paling luas, kompatibel dengan semua versi iOS dan Android. OpenType (OTF) — ekstensi TTF dengan dukungan untuk ligatur, glyph alternatif, dan fitur OpenType. Kedua format memiliki ekstensi .ttf dan .otf dan bekerja secara identik di platform seluler.

WOFF2 (Web Open Font Format 2) — format terkompresi untuk web, didukung di Android sejak versi 10. WOFF2 memberikan kompresi 30-50% dibandingkan TTF. Untuk iOS, WOFF2 didukung melalui Safari, tetapi di aplikasi native diperlukan konversi ke TTF/OTF. Variable Fonts (font variabel) — format modern yang menyimpan semua gaya dalam satu file.

Untuk pengembangan seluler, disarankan menggunakan OTF sebagai format utama — mendukung fitur OpenType dengan ukuran yang sama dengan TTF. Untuk menghemat ruang di APK, gunakan kompresi woff2 atau pemuatan font sesuai permintaan.

Menghubungkan font khusus di iOS

Proses menghubungkan font khusus di iOS terdiri dari dua langkah: menambahkan file ke bundle proyek dan mendaftarkan di Info.plist. File font ditempatkan di direktori proyek (biasanya Resources/Fonts) dan disertakan dalam target. Di Info.plist ditambahkan array UIAppFonts (Fonts provided by application) dengan nama file font, termasuk ekstensi.

Setelah pendaftaran, font tersedia melalui UIFont(name:size:) dengan nama PostScript. Nama PostScript dapat diketahui melalui UIFont.familyNames dan UIFont.fontNames(forFamilyName:). Jika nama salah, UIFont(name:size:) mengembalikan nil. Untuk debugging, disarankan menampilkan semua font yang terdaftar di layar saat pertama kali dijalankan.

Contoh koneksi

Mari kita lihat siklus lengkap menghubungkan font Montserrat di proyek iOS dengan Swift. File Montserrat-Regular.ttf ditambahkan ke proyek, ditentukan di Info.plist, kemudian dimuat melalui UIFont dan diterapkan ke UILabel. Untuk setiap gaya (regular, bold, italic) ditambahkan file terpisah dan entri terpisah di Info.plist.

// 1. Di Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Muat font dalam kode
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // kembali ke font sistem
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Gunakan di NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Penanganan situasi ketika font tidak dimuat (UIFont mengembalikan nil) wajib dilakukan. Alih-alih membuat aplikasi crash, gunakan font sistem sebagai fallback. Ini sangat penting untuk font yang dimuat dari jaringan atau ditambahkan ke modul opsional.

Pemuatan dinamis melalui CTFontManager

Untuk font yang diunduh sesuai permintaan, digunakan CTFontManagerRegisterGraphicsFont. Metode ini mendaftarkan font dari data di memori (Data) dan membuatnya tersedia untuk UIFont. Setelah digunakan, font dapat dibatalkan pendaftarannya melalui CTFontManagerUnregisterGraphicsFont. Pemuatan dinamis berguna untuk aplikasi dengan set font besar yang tidak semuanya diperlukan sekaligus.

Menghubungkan font khusus di Android

Di Android, font khusus ditambahkan melalui sistem sumber daya res/font. File TTF atau OTF ditempatkan di res/font/, setelah itu dibuat sumber daya XML Font Family untuk mengelompokkan gaya. Mulai Android 8.0 (API 26), ini adalah satu-satunya metode yang direkomendasikan. Untuk versi lama digunakan assets dan Typeface.createFromAsset.

XML Font Family mendeskripsikan korespondensi antara gaya (regular, bold, italic) dan file font. Dalam markup XML, atribut android:fontFamily="@font/my_font" secara otomatis memilih file yang tepat saat setTypeface dengan gaya yang sesuai. Ini menyederhanakan tipografi — cukup tentukan famili di tema, dan Android akan memilih bold sendiri saat pemanggilan setTypeface(textView, Typeface.BOLD).

Membuat Font Family

Buat file XML di res/font/my_font.xml, di mana semua file font untuk berbagai gaya dicantumkan. Setiap elemen memiliki atribut fontStyle (normal/italic) dan fontWeight (100-900). Setelah itu, dalam markup tentukan android:fontFamily="@font/my_font". Saat menggunakan textStyle="bold", Android secara otomatis memilih file dengan 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>

Saat menggunakan Font Family, metode sumber daya secara otomatis menyimpan cache font dan memilih gaya yang benar. Jika berat yang diperlukan tidak ada dalam famili, Android mensintesisnya dari yang terdekat yang tersedia. Untuk kontrol yang tepat atas font, gunakan Typeface.create() dengan penentuan file secara eksplisit.

Menghubungkan di Flutter dan React Native

Di framework lintas platform, menghubungkan font disatukan. Flutter menggunakan pubspec.yaml untuk menentukan font: file ditempatkan di folder fonts/ proyek, kemudian dideklarasikan di bagian fonts dengan menentukan famili dan gaya. Kemudian font diterapkan melalui TextStyle(fontFamily: 'Montserrat') atau di tema aplikasi. Flutter mendukung TTF dan OTF.

React Native menggunakan dua pendekatan: native (melalui Info.plist dan res/font) atau melalui pustaka react-native-vector-icons dan @expo-google-fonts. Expo menyederhanakan proses — font dimuat melalui expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation dan tema memungkinkan pengaturan font secara global.

Contoh di Flutter

Deklarasi font di pubspec.yaml dan penerapan di tema MaterialApp. File Montserrat-Regular.ttf dan Montserrat-Bold.ttf ditempatkan di fonts/. Setelah deklarasi, font tersedia melalui TextStyle di seluruh aplikasi. Flutter secara otomatis menggunakan file bold saat fontWeight: FontWeight.bold.

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

Jika Flutter tidak menemukan font di jalur yang ditentukan, aplikasi menggunakan font fallback sistem tanpa kesalahan. Untuk debugging, aktifkan checkConsistency di MaterialApp — ini memeriksa ketersediaan font dan menampilkan peringatan di konsol saat tidak ada.

Optimasi ukuran font

Ukuran APK dan IPA secara langsung tergantung pada jumlah font yang disertakan. Satu file TTF berbobot 50-500 KB untuk set karakter Latin dan hingga 2-5 MB untuk font dengan dukungan Sirilik, karakter Cina, atau set yang diperluas lainnya. Sepuluh font dapat menambah 10-20 MB ke ukuran aplikasi, yang kritis untuk unduhan seluler.

Untuk optimasi, gunakan subsetting — penghapusan karakter yang tidak digunakan dari file font. Alat seperti glyphhanger, fonttools (pyftsubset) dan Google Webfont Optimizer membuat versi font hanya dengan glyph yang diperlukan (Latin + Sirilik + angka + tanda baca). Ini mengurangi ukuran sebesar 50-80%. Di iOS, sumber daya on-demand dapat digunakan untuk font yang tidak diperlukan saat pertama kali dijalankan.

Font variabel

Variable Font (font variabel) — satu file yang berisi semua gaya: dari Thin hingga Black dan dari Condensed hingga Expanded. Satu font variabel dapat menggantikan 10-20 file terpisah dengan berat berbeda. Ukuran file semacam itu kira-kira sama dengan 1-2 file statis. Dukungan: iOS 11+, Android 10+, Flutter (melalui FontVariation), React Native (melalui pustaka khusus).

Kompresi dan pemuatan sesuai permintaan

Gunakan WOFF2 untuk mengurangi ukuran font sebesar 30-50%. Di Android dengan API 29, WOFF2 dapat digunakan langsung. Untuk iOS, diperlukan konversi WOFF2 ke TTF sebelum pendaftaran. Font yang hanya digunakan di onboarding atau di layar tertentu, muat melalui sumber daya on-demand (iOS) atau Dynamic Feature (Android) — mereka tidak akan masuk ke APK dasar.

Performa dan praktik terbaik

Font khusus memengaruhi performa dengan dua cara: waktu pemuatan dan memori. Pada referensi pertama ke font, sistem membaca file dari disk, mengurai tabel font, dan membuat struktur internal untuk rendering. Untuk font berukuran 1 MB, ini memakan waktu 20-50 ms. Caching setelah pemuatan pertama menghilangkan penundaan pada referensi berulang.

Memori: setiap font yang dimuat disimpan dalam cache proses. Font sistem sudah dimuat sebelumnya, font khusus dimuat saat pertama kali digunakan. Di memori, font memakan sekitar 2-3 kali lebih banyak daripada di disk, karena struktur yang diurai: tabel cmap, glyf, head, hmtx. Untuk 5 font khusus ukuran sedang (volume total 3 MB) diperlukan sekitar 6-9 MB RAM.

Rekomendasi

Batasi jumlah font khusus hingga 2-3 famili per aplikasi. Gunakan font variabel untuk mengganti beberapa gaya. Terapkan font sistem untuk elemen UI (tombol, label, daftar) dan font khusus hanya untuk tipografi aksen (judul, banner). Cache Typeface di Android melalui Map, dan UIFont di iOS melalui variabel statis.

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

Pemuatan Typeface di onBindViewHolder hanya diperbolehkan dengan adanya cache. Tanpa cache, setiap panggilan createFromAsset membuat objek baru dan membaca file dari disk. Saat menggulir RecyclerView, ini menyebabkan lag yang terlihat. Cache memecahkan masalah karena font dimuat sekali dan digunakan kembali.