Custom Font στην ανάπτυξη κινητών — τι είναι, μορφές και εφαρμογή

Τι είναι το Custom Font;

Custom Font (προσαρμοσμένη γραμματοσειρά) — είναι ένα αρχείο με τυπογραφικό χαρακτήρα που δεν ανήκει στο τυπικό σύνολο γραμματοσειρών του λειτουργικού συστήματος. Οι προγραμματιστές προσθέτουν τέτοιες γραμματοσειρές στο έργο για μοναδική τυπογραφία σύμφωνη με το brand. Οι προσαρμοσμένες γραμματοσειρές μπορεί να είναι είτε επί πληρωμή εμπορικές είτε δωρεάν γραμματοσειρές ανοιχτού κώδικα, για παράδειγμα Inter, Montserrat, Roboto (προσαρμοσμένη έκδοση).

Τυπικά σενάρια χρήσης προσαρμοσμένων γραμματοσειρών: λογότυπα και επικεφαλίδες εφαρμογών επωνυμίας, εφαρμογές ανάγνωσης με ειδικές απαιτήσεις τυπογραφίας, παιχνίδια με θεματικές γραμματοσειρές, εφαρμογές για μη λατινικές γλώσσες όπου η γραμματοσειρά συστήματος δεν υποστηρίζει τα απαραίτητα γλύφη. Σύμφωνα με τα δεδομένα του Google Fonts, πάνω από το 60% των εφαρμογών στην κορυφαία 100 προσαρμόζουν γραμματοσειρές για οπτική διαφοροποίηση.

Γιατί χρειάζονται προσαρμοσμένες γραμματοσειρές

Οι γραμματοσειρές συστήματος (San Francisco στο iOS, Roboto στο Android) είναι βελτιστοποιημένες για διεπαφές, αλλά δεν είναι κατάλληλες για τυπογραφία επωνυμίας. Η προσαρμοσμένη γραμματοσειρά ενισχύει την αναγνωρισιμότητα της επωνυμίας, μπορεί να περιέχει ειδικά σύμβολα (γραμματοσειρές εικονιδίων) και βελτιώνει την αναγνωσιμότητα για συγκεκριμένο κοινό. Ωστόσο, η υπερβολική χρήση διαφορετικών γραμματοσειρών επιδεινώνει την εμπειρία χρήστη — συνιστάται όχι περισσότερες από 2-3 οικογένειες ανά εφαρμογή.

Μορφές γραμματοσειρών για εφαρμογές κινητών

Οι πλατφόρμες κινητών υποστηρίζουν διάφορες μορφές γραμματοσειρών. TrueType (TTF) — η πιο διαδεδομένη μορφή, συμβατή με όλες τις εκδόσεις iOS και Android. OpenType (OTF) — επέκταση του TTF με υποστήριξη για συνδέσμους, εναλλακτικά γλύφη και λειτουργίες OpenType. Και οι δύο μορφές έχουν επεκτάσεις .ttf και .otf και λειτουργούν πανομοιότυπα σε πλατφόρμες κινητών.

WOFF2 (Web Open Font Format 2) — συμπιεσμένη μορφή για τον ιστό, υποστηριζόμενη στο Android από την έκδοση 10. Το WOFF2 παρέχει συμπίεση 30-50% σε σύγκριση με το TTF. Για iOS, το WOFF2 υποστηρίζεται μέσω Safari, αλλά σε εγγενείς εφαρμογές απαιτείται μετατροπή σε TTF/OTF. Οι Variable Fonts (μεταβλητές γραμματοσειρές) — σύγχρονη μορφή που αποθηκεύει όλα τα στυλ σε ένα αρχείο.

Για ανάπτυξη κινητών συνιστάται η χρήση OTF ως κύριας μορφής — υποστηρίζει λειτουργίες OpenType στο ίδιο μέγεθος με το TTF. Για εξοικονόμηση χώρου στο APK, χρησιμοποιήστε συμπίεση μέσω woff2 ή φόρτωση γραμματοσειρών κατ' απαίτηση.

Σύνδεση προσαρμοσμένων γραμματοσειρών σε iOS

Η διαδικασία σύνδεσης μιας προσαρμοσμένης γραμματοσειράς σε iOS αποτελείται από δύο βήματα: προσθήκη του αρχείου στο bundle του έργου και εγγραφή στο Info.plist. Το αρχείο γραμματοσειράς τοποθετείται στον κατάλογο του έργου (συνήθως Resources/Fonts) και συμπεριλαμβάνεται στο target. Στο Info.plist προστίθεται ένας πίνακας UIAppFonts (Fonts provided by application) με τα ονόματα των αρχείων γραμματοσειράς, συμπεριλαμβανομένης της επέκτασης.

Μετά την εγγραφή, η γραμματοσειρά είναι διαθέσιμη μέσω του UIFont(name:size:) με το όνομα PostScript. Το όνομα PostScript μπορεί να βρεθεί μέσω των UIFont.familyNames και UIFont.fontNames(forFamilyName:). Αν το όνομα είναι λανθασμένο, το UIFont(name:size:) επιστρέφει nil. Για εντοπισμό σφαλμάτων, συνιστάται η εμφάνιση όλων των εγγεγραμμένων γραμματοσειρών στην οθόνη κατά την πρώτη εκκίνηση.

Παράδειγμα σύνδεσης

Ας εξετάσουμε τον πλήρη κύκλο σύνδεσης της γραμματοσειράς Montserrat σε ένα έργο iOS σε Swift. Το αρχείο Montserrat-Regular.ttf προστίθεται στο έργο, καθορίζεται στο Info.plist, στη συνέχεια φορτώνεται μέσω UIFont και εφαρμόζεται σε ένα UILabel. Για κάθε στυλ (regular, bold, italic) προστίθεται ξεχωριστό αρχείο και ξεχωριστή εγγραφή στο Info.plist.

// 1. Στο Info.plist: UIAppFonts → "Montserrat-Regular.ttf"
// 2. Φόρτωση γραμματοσειράς στον κώδικα
guard let customFont = UIFont(name: "Montserrat-Regular", size: 16) else {
    // επαναφορά στη γραμματοσειρά συστήματος
    label.font = UIFont.systemFont(ofSize: 16)
    return
}
label.font = customFont
// 3. Χρήση σε NSAttributedString
let attributes = [NSAttributedString.Key.font: customFont]
let attributed = NSAttributedString(string: "Text", attributes: attributes)

Ο χειρισμός της κατάστασης όταν η γραμματοσειρά δεν έχει φορτωθεί (UIFont επιστρέφει nil) είναι υποχρεωτικός. Αντί για κατάρρευση της εφαρμογής, χρησιμοποιήστε τη γραμματοσειρά συστήματος ως fallback. Αυτό είναι ιδιαίτερα σημαντικό για γραμματοσειρές που φορτώνονται από το δίκτυο ή προστίθενται σε προαιρετικές μονάδες.

Δυναμική φόρτωση μέσω CTFontManager

Για γραμματοσειρές που γίνονται λήψη κατ' απαίτηση, χρησιμοποιείται το CTFontManagerRegisterGraphicsFont. Αυτή η μέθοδος εγγράφει τη γραμματοσειρά από δεδομένα στη μνήμη (Data) και την καθιστά διαθέσιμη για το UIFont. Μετά τη χρήση, η γραμματοσειρά μπορεί να διαγραφεί από την εγγραφή μέσω του CTFontManagerUnregisterGraphicsFont. Η δυναμική φόρτωση είναι χρήσιμη για εφαρμογές με μεγάλο σύνολο γραμματοσειρών, όπου δεν χρειάζονται όλες ταυτόχρονα.

Σύνδεση προσαρμοσμένων γραμματοσειρών σε Android

Στο Android, οι προσαρμοσμένες γραμματοσειρές προστίθενται μέσω του συστήματος πόρων res/font. Τα αρχεία TTF ή OTF τοποθετούνται στο res/font/, και στη συνέχεια δημιουργούνται πόροι XML Font Family για ομαδοποίηση στυλ. Από το Android 8.0 (API 26) και μετά, αυτή είναι η μόνη συνιστώμενη μέθοδος. Για παλαιότερες εκδόσεις χρησιμοποιούνται assets και Typeface.createFromAsset.

Το XML Font Family περιγράφει την αντιστοιχία μεταξύ στυλ (regular, bold, italic) και αρχείου γραμματοσειράς. Στη σήμανση XML, το χαρακτηριστικό android:fontFamily="@font/my_font" επιλέγει αυτόματα το κατάλληλο αρχείο κατά την κλήση setTypeface με το αντίστοιχο στυλ. Αυτό απλοποιεί την τυπογραφία — αρκεί να καθορίσετε την οικογένεια στο θέμα, και το Android θα επιλέξει μόνο του το bold κατά την κλήση setTypeface(textView, Typeface.BOLD).

Δημιουργία Font Family

Δημιουργήστε ένα αρχείο XML στο res/font/my_font.xml, όπου αναφέρονται όλα τα αρχεία γραμματοσειράς για διαφορετικά στυλ. Κάθε στοιχείο έχει χαρακτηριστικά fontStyle (normal/italic) και fontWeight (100-900). Στη συνέχεια, στη σήμανση καθορίστε το android:fontFamily="@font/my_font". Κατά τη χρήση του textStyle="bold", το Android θα επιλέξει αυτόματα το αρχείο με 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>

Κατά τη χρήση του Font Family, η μέθοδος πόρου αποθηκεύει αυτόματα στην κρυφή μνήμη τις γραμματοσειρές και επιλέγει το σωστό στυλ. Εάν το απαιτούμενο βάρος λείπει από την οικογένεια, το Android το συνθέτει από το πλησιέστερο διαθέσιμο. Για ακριβή έλεγχο της γραμματοσειράς, χρησιμοποιήστε το Typeface.create() με ρητή αναφορά του αρχείου.

Σύνδεση σε Flutter και React Native

Σε πλατφορμικά ανεξάρτητα πλαίσια, η σύνδεση γραμματοσειρών είναι ενοποιημένη. Το Flutter χρησιμοποιεί το pubspec.yaml για τον καθορισμό γραμματοσειρών: τα αρχεία τοποθετούνται στο φάκελο fonts/ του έργου, στη συνέχεια δηλώνονται στην ενότητα fonts με αναφορά της οικογένειας και των στυλ. Έπειτα, η γραμματοσειρά εφαρμόζεται μέσω του TextStyle(fontFamily: 'Montserrat') ή στο θέμα της εφαρμογής. Το Flutter υποστηρίζει TTF και OTF.

Το React Native χρησιμοποιεί δύο προσεγγίσεις: εγγενή (μέσω Info.plist και res/font) ή μέσω βιβλιοθηκών react-native-vector-icons και @expo-google-fonts. Το Expo απλοποιεί τη διαδικασία — οι γραμματοσειρές φορτώνονται μέσω του expo-font: Font.loadAsync({ 'Montserrat': require('./assets/fonts/Montserrat.ttf') }). Τα React Navigation και τα θέματα επιτρέπουν τον καθολικό ορισμό της γραμματοσειράς.

Παράδειγμα στο Flutter

Δήλωση γραμματοσειρών στο pubspec.yaml και εφαρμογή στο θέμα MaterialApp. Τα αρχεία Montserrat-Regular.ttf και Montserrat-Bold.ttf τοποθετούνται στο fonts/. Μετά τη δήλωση, η γραμματοσειρά είναι διαθέσιμη μέσω του TextStyle σε ολόκληρη την εφαρμογή. Το Flutter χρησιμοποιεί αυτόματα το αρχείο bold όταν fontWeight: FontWeight.bold.

// pubspec.yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/Montserrat-Regular.ttf
        - asset: fonts/Montserrat-Bold.ttf
          weight: 700
// Χρήση στο θέμα
MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.bold,
        fontSize: 28
      )
    )
  )
)

Εάν το Flutter δεν βρει τη γραμματοσειρά στην καθορισμένη διαδρομή, η εφαρμογή χρησιμοποιεί τη γραμματοσειρά εφεδρείας συστήματος χωρίς σφάλματα. Για εντοπισμό σφαλμάτων, ενεργοποιήστε το checkConsistency στο MaterialApp — ελέγχει τη διαθεσιμότητα γραμματοσειρών και εμφανίζει προειδοποιήσεις στην κονσόλα όταν λείπουν.

Βελτιστοποίηση μεγέθους γραμματοσειρών

Το μέγεθος APK και IPA εξαρτάται άμεσα από τον αριθμό των γραμματοσειρών που περιλαμβάνονται. Ένα αρχείο TTF ζυγίζει 50-500 KB για το λατινικό σύνολο χαρακτήρων και έως 2-5 MB για γραμματοσειρές με υποστήριξη κυριλλικών, κινεζικών χαρακτήρων ή άλλων εκτεταμένων συνόλων. Δέκα γραμματοσειρές μπορούν να προσθέσουν 10-20 MB στο μέγεθος της εφαρμογής, το οποίο είναι κρίσιμο για λήψη σε κινητό.

Για βελτιστοποίηση, χρησιμοποιήστε το subsetting — αφαίρεση αχρησιμοποίητων χαρακτήρων από το αρχείο γραμματοσειράς. Εργαλεία όπως το glyphhanger, το fonttools (pyftsubset) και το Google Webfont Optimizer δημιουργούν μια έκδοση γραμματοσειράς μόνο με τα απαραίτητα γλύφη (λατινικά + κυριλλικά + αριθμοί + σημεία στίξης). Αυτό μειώνει το μέγεθος κατά 50-80%. Στο iOS, μπορούν να χρησιμοποιηθούν πόροι κατ' απαίτηση για γραμματοσειρές που δεν χρειάζονται κατά την πρώτη εκκίνηση.

Μεταβλητές γραμματοσειρές

Variable Font (μεταβλητή γραμματοσειρά) — ένα αρχείο που περιέχει όλα τα στυλ: από Thin έως Black και από Condensed έως Expanded. Μία μεταβλητή γραμματοσειρά μπορεί να αντικαταστήσει 10-20 ξεχωριστά αρχεία με διαφορετικά βάρη. Το μέγεθος ενός τέτοιου αρχείου είναι περίπου ίσο με 1-2 στατικά αρχεία. Υποστήριξη: iOS 11+, Android 10+, Flutter (μέσω FontVariation), React Native (μέσω προσαρμοσμένων βιβλιοθηκών).

Συμπίεση και φόρτωση κατ' απαίτηση

Χρησιμοποιήστε WOFF2 για μείωση του μεγέθους γραμματοσειρών κατά 30-50%. Στο Android με API 29, μπορείτε να χρησιμοποιήσετε WOFF2 απευθείας. Για iOS, απαιτείται μετατροπή WOFF2 σε TTF πριν από την εγγραφή. Γραμματοσειρές που χρησιμοποιούνται μόνο στο onboarding ή σε συγκεκριμένες οθόνες, φορτώστε μέσω πόρων κατ' απαίτηση (iOS) ή Dynamic Feature (Android) — δεν θα συμπεριληφθούν στο βασικό APK.

Απόδοση και βέλτιστες πρακτικές

Οι προσαρμοσμένες γραμματοσειρές επηρεάζουν την απόδοση με δύο τρόπους: χρόνο φόρτωσης και μνήμη. Κατά την πρώτη αναφορά στη γραμματοσειρά, το σύστημα διαβάζει το αρχείο από το δίσκο, αναλύει τους πίνακες γραμματοσειράς και δημιουργεί εσωτερικές δομές για απόδοση. Για μια γραμματοσειρά μεγέθους 1 MB, αυτό διαρκεί 20-50 ms. Η προσωρινή αποθήκευση μετά την πρώτη φόρτωση εξαλείφει την καθυστέρηση σε επαναλαμβανόμενες αναφορές.

Μνήμη: κάθε φορτωμένη γραμματοσειρά αποθηκεύεται στην κρυφή μνήμη της διεργασίας. Οι γραμματοσειρές συστήματος είναι προφορτωμένες, οι προσαρμοσμένες φορτώνονται κατά την πρώτη χρήση. Στη μνήμη, η γραμματοσειρά καταλαμβάνει περίπου 2-3 φορές περισσότερο χώρο από ότι στο δίσκο, λόγω των αναλυμένων δομών: πινάκων cmap, glyf, head, hmtx. Για 5 προσαρμοσμένες γραμματοσειρές μεσαίου μεγέθους (συνολικός όγκος 3 MB) απαιτούνται περίπου 6-9 MB RAM.

Συστάσεις

Περιορίστε τον αριθμό προσαρμοσμένων γραμματοσειρών σε 2-3 οικογένειες ανά εφαρμογή. Χρησιμοποιήστε μεταβλητές γραμματοσειρές για αντικατάσταση πολλαπλών στυλ. Εφαρμόστε γραμματοσειρές συστήματος για στοιχεία διεπαφής (κουμπιά, ετικέτες, λίστες) και προσαρμοσμένες μόνο για τυπογραφία έμφασης (επικεφαλίδες, banner). Αποθηκεύστε προσωρινά το Typeface στο Android μέσω Map, και το UIFont στο iOS μέσω στατικών μεταβλητών.

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
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.textView.typeface = FontCache.get(context, R.font.montserrat_regular)
}

Η φόρτωση Typeface στο onBindViewHolder επιτρέπεται μόνο με παρουσία κρυφής μνήμης. Χωρίς κρυφή μνήμη, κάθε κλήση createFromAsset δημιουργεί ένα νέο αντικείμενο και διαβάζει το αρχείο από το δίσκο. Κατά την κύλιση του RecyclerView, αυτό προκαλεί αισθητές καθυστερήσεις. Η κρυφή μνήμη λύνει το πρόβλημα, καθώς η γραμματοσειρά φορτώνεται μία φορά και επαναχρησιμοποιείται.