Mobil geliştirmede Custom Font — nedir, biçimler ve kullanım

Custom Font Nedir?

Custom Font (özel yazı tipi), işletim sisteminin varsayılan yazı tipi kümesinin parçası olmayan bir yazı tipi dosyasıdır. Geliştiriciler, benzersiz, markayla tutarlı tipografi için projelerine bu tür yazı tiplerini ekler. Özel yazı tipleri, ücretli ticari yazı tipleri veya Inter, Montserrat veya Roboto'nun özel bir sürümü gibi ücretsiz açık kaynak yazı tipleri olabilir.

Özel yazı tiplerinin tipik kullanım durumları şunları içerir: marka uygulama logoları ve başlıkları, belirli tipografik gereksinimleri olan okuma uygulamaları, tematik yazı tiplerine sahip oyunlar ve sistem yazı tipinin gerekli glifleri desteklemediği Latin olmayan diller için uygulamalar. Google Fonts'a göre, ilk 100 uygulamanın %60'ından fazlası görsel farklılaşma için yazı tiplerini özelleştirir.

Özel Yazı Tiplerine Neden İhtiyaç Duyulur

Sistem yazı tipleri (iOS'ta San Francisco, Android'de Roboto) arayüzler için optimize edilmiştir ancak marka tipografisi için uygun değildir. Özel bir yazı tipi marka tanınırlığını güçlendirir, özel karakterler (simge yazı tipleri) içerebilir ve belirli kitleler için okunabilirliği artırır. Ancak, farklı yazı tiplerinin aşırı kullanımı kullanıcı deneyimini düşürür — uygulama başına 2–3 aileden fazla kullanılmaması önerilir.

Mobil Uygulamalar için Yazı Tipi Biçimleri

Mobil platformlar birkaç yazı tipi biçimini destekler. TrueType (TTF) en yaygın biçimdir, iOS ve Android'in tüm sürümleriyle uyumludur. OpenType (OTF), bitişik harfler, alternatif glifler ve OpenType özellikleri desteğiyle TTF'nin bir uzantısıdır. Her iki biçim de .ttf ve .otf uzantılarına sahiptir ve mobil platformlarda aynı şekilde çalışır.

WOFF2 (Web Open Font Format 2), web için sıkıştırılmış bir biçimdir, Android sürüm 10'dan itibaren desteklenir. WOFF2, TTF'ye kıyasla %30–50 oranında sıkıştırma sağlar. iOS için WOFF2, Safari aracılığıyla desteklenir, ancak yerel uygulamalar TTF/OTF'ye dönüştürme gerektirir. Değişken yazı tipleri (Variable Fonts), tüm ağırlıkları tek bir dosyada depolayan modern bir biçimdir.

Mobil geliştirme için ana biçim olarak OTF kullanılması önerilir — TTF ile aynı boyutta OpenType özelliklerini destekler. APK alanından tasarruf etmek için woff2 aracılığıyla sıkıştırma veya isteğe bağlı yazı tipi yükleme kullanın.

iOS'ta Özel Yazı Tiplerini Entegre Etme

iOS'ta özel bir yazı tipini entegre etme süreci iki adımdan oluşur: dosyayı proje paketine eklemek ve Info.plist'e kaydetmek. Yazı tipi dosyası proje dizinine (genellikle Resources/Fonts) yerleştirilir ve hedefe (target) dahil edilir. Info.plist'e, uzantı dahil yazı tipi dosya adlarıyla birlikte bir UIAppFonts dizisi (Fonts provided by application) eklenir.

Kayıttan sonra, yazı tipine PostScript adı kullanılarak UIFont(name:size:) aracılığıyla erişilebilir. PostScript adı, UIFont.familyNames ve UIFont.fontNames(forFamilyName:) aracılığıyla bulunabilir. Ad yanlışsa, UIFont(name:size:) nil döndürür. Hata ayıklama için, ilk başlatmada kayıtlı tüm yazı tiplerinin ekranda görüntülenmesi önerilir.

Entegrasyon Örneği

Swift'te bir iOS projesine Montserrat yazı tipini entegre etmenin tüm döngüsünü inceleyelim. Montserrat-Regular.ttf dosyası projeye eklenir, Info.plist'te bildirilir, ardından UIFont aracılığıyla yüklenir ve bir UILabel'e uygulanır. Her ağırlık (regular, bold, italic) için ayrı bir dosya ve Info.plist'te ayrı bir giriş gerekir.

// 1. Info.plist'te: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Kodda yazı tipini yükle
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // sistem yazı tipine geri dön
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. NSAttributedString'de kullan
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Yazı tipinin yüklenmemesi durumunu (UIFont nil döndürür) ele almak zorunludur. Uygulamanın çökmesi yerine, sistem yazı tipini yedek olarak kullanın. Bu, ağdan yüklenen veya isteğe bağlı modüllere eklenen yazı tipleri için özellikle önemlidir.

CTFontManager ile Dinamik Yükleme

İsteğe bağlı indirilen yazı tipleri için CTFontManagerRegisterGraphicsFont kullanılır. Bu yöntem, bellek içi verilerden (Data) bir yazı tipini kaydeder ve UIFont için kullanılabilir hale getirir. Kullanımdan sonra, yazı tipi CTFontManagerUnregisterGraphicsFont aracılığıyla kaydı silinebilir. Dinamik yükleme, hepsine hemen ihtiyaç duyulmayan geniş yazı tipi kümesine sahip uygulamalar için kullanışlıdır.

Android'de Özel Yazı Tiplerini Entegre Etme

Android'de, özel yazı tipleri res/font kaynak sistemi aracılığıyla eklenir. TTF veya OTF dosyaları res/font/ dizinine yerleştirilir, ardından ağırlıkları gruplamak için XML Font Family kaynakları oluşturulur. Android 8.0 (API 26) ile başlayarak, bu önerilen tek yöntemdir. Eski sürümler için assets ve Typeface.createFromAsset kullanılır.

Bir XML Font Family, bir ağırlık (regular, bold, italic) ile bir yazı tipi dosyası arasındaki eşlemeyi tanımlar. XML düzeninde, android:fontFamily="@font/my_font" özelliği, ilgili stille setTypeface çağrıldığında otomatik olarak doğru dosyayı seçer. Bu, tipografiyi basitleştirir — temada aileyi belirtmeniz yeterlidir ve setTypeface(textView, Typeface.BOLD) çağrıldığında Android otomatik olarak kalın sürümü seçer.

Font Family Oluşturma

Farklı ağırlıklar için tüm yazı tipi dosyalarını listeleyen res/font/my_font.xml dosyasında bir XML dosyası oluşturun. Her öğenin fontStyle (normal/italic) ve fontWeight (100–900) nitelikleri vardır. Ardından, düzende android:fontFamily="@font/my_font" belirtin. textStyle="bold" kullanıldığında, Android otomatik olarak fontWeight 700 olan dosyayı seçer.

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

Font Family kullanırken, kaynak yaklaşımı yazı tiplerini otomatik olarak önbelleğe alır ve doğru ağırlığı seçer. Gerekli ağırlık ailede mevcut değilse, Android onu en yakın mevcut ağırlıktan sentezler. Yazı tipi üzerinde hassas kontrol için, açık bir dosya referansıyla Typeface.create() kullanın.

Flutter ve React Native'de Entegrasyon

Platformlar arası çerçevelerde, yazı tipi entegrasyonu birleştirilmiştir. Flutter yazı tiplerini bildirmek için pubspec.yaml kullanır: dosyalar projenin fonts/ klasörüne yerleştirilir ve ardından aile ve ağırlıklarla birlikte fonts bölümünde listelenir. Yazı tipi daha sonra TextStyle(fontFamily: 'Montserrat') veya uygulama teması aracılığıyla uygulanır. Flutter, TTF ve OTF'yi destekler.

React Native iki yaklaşım kullanır: yerel (Info.plist ve res/font aracılığıyla) veya react-native-vector-icons ve @expo-google-fonts gibi kitaplıklar aracılığıyla. Expo süreci basitleştirir — yazı tipleri expo-font aracılığıyla yüklenir: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). React Navigation ve temalar, bir yazı tipini genel olarak ayarlamaya olanak tanır.

Flutter Örneği

pubspec.yaml'de yazı tiplerini bildirme ve MaterialApp temasında uygulama. Montserrat-Regular.ttf ve Montserrat-Bold.ttf dosyaları fonts/ klasörüne yerleştirilir. Bildirimden sonra, yazı tipine uygulama genelinde TextStyle aracılığıyla erişilebilir. fontWeight: FontWeight.bold belirtildiğinde Flutter otomatik olarak kalın dosyayı kullanır.

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

Flutter belirtilen yolda bir yazı tipi bulamazsa, uygulama hata vermeden sistem yedek yazı tipini kullanır. Hata ayıklama için, MaterialApp'te checkConsistency'i etkinleştirin — yazı tipi kullanılabilirliğini kontrol eder ve yazı tipleri eksik olduğunda konsola uyarılar yazdırır.

Yazı Tipi Boyutunu Optimize Etme

APK ve IPA boyutu, dahil edilen yazı tiplerinin sayısına doğrudan bağlıdır. Tek bir TTF dosyası, Latin karakter seti için 50–500 KB ve Kiril, CJK karakterleri veya diğer genişletilmiş setleri destekleyen yazı tipleri için 2–5 MB ağırlığındadır. On yazı tipi, uygulama boyutuna 10–20 MB ekleyebilir, bu da mobil indirmeler için kritiktir.

Optimizasyon için alt kümeleme (subsetting) kullanın — yazı tipi dosyasından kullanılmayan karakterleri kaldırma. glyphhanger, fonttools (pyftsubset) ve Google Webfont Optimizer gibi araçlar, yalnızca gerekli gliflerle (Latin + Kiril + rakamlar + noktalama) bir yazı tipi sürümü oluşturur. Bu, boyutu %50–80 oranında azaltır. iOS'ta, ilk başlatmada ihtiyaç duyulmayan yazı tipleri için isteğe bağlı kaynaklar kullanılabilir.

Değişken Yazı Tipleri

Değişken yazı tipi (Variable Font), Thin'den Black'e ve Condensed'den Expanded'e kadar tüm ağırlıkları içeren tek bir dosyadır. Bir değişken yazı tipi, farklı ağırlıklara sahip 10–20 ayrı dosyayı değiştirebilir. Böyle bir dosyanın boyutu yaklaşık olarak 1–2 statik dosyaya eşittir. Destek: iOS 11+, Android 10+, Flutter (FontVariation aracılığıyla), React Native (özel kitaplıklar aracılığıyla).

Sıkıştırma ve İsteğe Bağlı Yükleme

Yazı tipi boyutunu %30–50 azaltmak için WOFF2 kullanın. API 29 ile Android'de WOFF2 doğrudan kullanılabilir. iOS için, kayıttan önce WOFF2'nin TTF'ye dönüştürülmesi gerekir. Yalnızca kullanıcı alıştırma sırasında veya belirli ekranlarda kullanılan yazı tipleri, isteğe bağlı kaynaklar (iOS) veya Dynamic Feature (Android) aracılığıyla yüklenmelidir — bunlar temel APK'ya dahil edilmez.

Performans ve En İyi Uygulamalar

Özel yazı tipleri performansı iki şekilde etkiler: yükleme süresi ve bellek. İlk erişimde, sistem diski dosyayı okur, yazı tipi tablolarını ayrıştırır ve işleme için iç yapılar oluşturur. 1 MB'lık bir yazı tipi için bu 20–50 ms sürer. İlk yüklemeden sonra önbelleğe alma, sonraki erişimlerde gecikmeyi ortadan kaldırır.

Bellek: yüklenen her yazı tipi, işlem önbelleğinde depolanır. Sistem yazı tipleri önceden yüklenmiştir; özel yazı tipleri ilk kullanımda yüklenir. Bellekte, bir yazı tipi, ayrıştırılmış yapılar (cmap, glyf, head, hmtx tabloları) nedeniyle disktekinden yaklaşık 2–3 kat daha fazla yer kaplar. Ortalama boyutta 5 özel yazı tipi (toplam 3 MB) için yaklaşık 6–9 MB RAM gerekir.

Öneriler

Özel yazı tiplerini uygulama başına 2–3 aileyle sınırlayın. Birden çok ağırlığı değiştirmek için değişken yazı tiplerini kullanın. UI öğeleri (düğmeler, etiketler, listeler) için sistem yazı tiplerini uygulayın ve özel yazı tiplerini yalnızca vurgu tipografisi (başlıklar, afişler) için kullanın. Android'de Typeface'i bir Map aracılığıyla, iOS'ta UIFont'u statik değişkenler aracılığıyla önbelleğe alın.

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

onBindViewHolder'da Typeface yüklemek yalnızca önbellekleme ile kabul edilebilir. Önbellek olmadan, her createFromAsset çağrısı yeni bir nesne oluşturur ve dosyayı diskten okur. RecyclerView kaydırma sırasında bu, fark edilir gecikmelere neden olur. Önbellek, yazı tipinin bir kez yüklenmesi ve yeniden kullanılması nedeniyle sorunu çözer.