मोबाइल डेवलपमेंट में Custom Font — यह क्या है, प्रारूप और उपयोग

Custom Font क्या है?

Custom Font (कस्टम फ़ॉन्ट) एक टाइपफ़ेस फ़ाइल है जो ऑपरेटिंग सिस्टम के डिफ़ॉल्ट फ़ॉन्ट सेट का हिस्सा नहीं है। डेवलपर अपने प्रोजेक्ट में अद्वितीय ब्रांड-संगत टाइपोग्राफी के लिए ऐसे फ़ॉन्ट जोड़ते हैं। कस्टम फ़ॉन्ट भुगतान वाले व्यावसायिक टाइपफ़ेस या मुफ़्त ओपन-सोर्स फ़ॉन्ट जैसे Inter, Montserrat या Roboto के कस्टम संस्करण हो सकते हैं।

कस्टम फ़ॉन्ट के विशिष्ट उपयोग के मामलों में शामिल हैं: ब्रांड ऐप लोगो और हेडलाइन, विशिष्ट टाइपोग्राफ़िक आवश्यकताओं वाले पढ़ने के ऐप, विषयगत फ़ॉन्ट वाले गेम और गैर-लैटिन भाषाओं के लिए एप्लिकेशन जहां सिस्टम फ़ॉन्ट आवश्यक ग्लिफ़ का समर्थन नहीं करता है। Google Fonts के अनुसार, शीर्ष 100 ऐप में से 60% से अधिक दृश्य भेदभाव के लिए अपने फ़ॉन्ट को कस्टमाइज़ करते हैं।

कस्टम फ़ॉन्ट की आवश्यकता क्यों

सिस्टम फ़ॉन्ट (iOS पर San Francisco, Android पर Roboto) इंटरफ़ेस के लिए अनुकूलित हैं लेकिन ब्रांड टाइपोग्राफी के लिए उपयुक्त नहीं हैं। एक कस्टम फ़ॉन्ट ब्रांड पहचान को मजबूत करता है, इसमें विशेष वर्ण (आइकन फ़ॉन्ट) शामिल हो सकते हैं और विशिष्ट दर्शकों के लिए पढ़ने की क्षमता में सुधार करता है। हालांकि, विभिन्न फ़ॉन्ट का अत्यधिक उपयोग UX को ख़राब करता है — प्रति एप्लिकेशन 2–3 परिवारों से अधिक न उपयोग करने की अनुशंसा की जाती है।

मोबाइल एप्लिकेशन के लिए फ़ॉन्ट प्रारूप

मोबाइल प्लेटफ़ॉर्म कई फ़ॉन्ट प्रारूपों का समर्थन करते हैं। TrueType (TTF) सबसे सामान्य प्रारूप है, जो iOS और Android के सभी संस्करणों के साथ संगत है। OpenType (OTF) लिगेचर, वैकल्पिक ग्लिफ़ और OpenType सुविधाओं के समर्थन के साथ TTF का विस्तार है। दोनों प्रारूपों में .ttf और .otf एक्सटेंशन हैं और मोबाइल प्लेटफ़ॉर्म पर समान रूप से काम करते हैं।

WOFF2 (Web Open Font Format 2) वेब के लिए एक संपीड़ित प्रारूप है, जो Android संस्करण 10 से समर्थित है। WOFF2, TTF की तुलना में 30–50% तक संपीड़न प्रदान करता है। iOS के लिए, WOFF2 Safari के माध्यम से समर्थित है, लेकिन देशी एप्लिकेशन को TTF/OTF में रूपांतरण की आवश्यकता होती है। वेरिएबल फ़ॉन्ट एक आधुनिक प्रारूप है जो सभी वेट को एक फ़ाइल में संग्रहीत करता है।

मोबाइल डेवलपमेंट के लिए, मुख्य प्रारूप के रूप में OTF का उपयोग करने की अनुशंसा की जाती है — यह TTF के समान आकार पर OpenType सुविधाओं का समर्थन करता है। APK स्थान बचाने के लिए, woff2 के माध्यम से संपीड़न या ऑन-डिमांड फ़ॉन्ट लोडिंग का उपयोग करें।

iOS में कस्टम फ़ॉन्ट जोड़ना

iOS में कस्टम फ़ॉन्ट जोड़ने की प्रक्रिया में दो चरण शामिल हैं: फ़ाइल को प्रोजेक्ट बंडल में जोड़ना और 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 लौटाता है। डिबगिंग के लिए, पहले लॉन्च पर सभी पंजीकृत फ़ॉन्ट को स्क्रीन पर प्रदर्शित करने की अनुशंसा की जाती है।

एकीकरण उदाहरण

आइए Swift में iOS प्रोजेक्ट में Montserrat फ़ॉन्ट को एकीकृत करने के पूरे चक्र को देखें। 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 लौटाता है) तो स्थिति को संभालना अनिवार्य है। एप्लिकेशन को क्रैश करने के बजाय, सिस्टम फ़ॉन्ट को फ़ॉलबैक के रूप में उपयोग करें। यह नेटवर्क से लोड किए गए या वैकल्पिक मॉड्यूल में जोड़े गए फ़ॉन्ट के लिए विशेष रूप से महत्वपूर्ण है।

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 कॉल करने पर स्वचालित रूप से सही फ़ाइल का चयन करती है। यह टाइपोग्राफी को सरल बनाता है — बस थीम में फ़ैमिली निर्दिष्ट करें, और setTypeface(textView, Typeface.BOLD) कॉल करने पर Android स्वचालित रूप से bold संस्करण चुन लेगा।

Font Family बनाना

res/font/my_font.xml पर एक 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 के माध्यम से उपलब्ध होता है। जब fontWeight: FontWeight.bold निर्दिष्ट किया जाता है, तो Flutter स्वचालित रूप से 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 को निर्दिष्ट पथ पर फ़ॉन्ट नहीं मिलता है, तो एप्लिकेशन त्रुटियों के बिना सिस्टम फ़ॉलबैक फ़ॉन्ट का उपयोग करता है। डिबगिंग के लिए, MaterialApp में checkConsistency सक्षम करें — यह फ़ॉन्ट उपलब्धता की जाँच करता है और फ़ॉन्ट गायब होने पर कंसोल में चेतावनी प्रिंट करता है।

फ़ॉन्ट आकार अनुकूलन

APK और IPA का आकार सीधे शामिल फ़ॉन्ट की संख्या पर निर्भर करता है। एक TTF फ़ाइल लैटिन वर्ण सेट के लिए 50–500 KB और सिरिलिक, CJK वर्ण या अन्य विस्तारित सेट का समर्थन करने वाले फ़ॉन्ट के लिए 2–5 MB तक होती है। दस फ़ॉन्ट एप्लिकेशन के आकार में 10–20 MB जोड़ सकते हैं, जो मोबाइल डाउनलोड के लिए महत्वपूर्ण है।

अनुकूलन के लिए, subsetting का उपयोग करें — फ़ॉन्ट फ़ाइल से अप्रयुक्त वर्णों को हटाना। glyphhanger, fonttools (pyftsubset) और Google Webfont Optimizer जैसे उपकरण केवल आवश्यक ग्लिफ़ (लैटिन + सिरिलिक + अंक + विराम चिह्न) के साथ फ़ॉन्ट संस्करण बनाते हैं। इससे आकार 50–80% कम हो जाता है। iOS पर, ऑन-डिमांड संसाधनों का उपयोग उन फ़ॉन्ट के लिए किया जा सकता है जिनकी पहले लॉन्च पर आवश्यकता नहीं होती है।

वेरिएबल फ़ॉन्ट

वेरिएबल फ़ॉन्ट एक एकल फ़ाइल है जिसमें Thin से Black और Condensed से Expanded तक सभी वेट शामिल हैं। एक वेरिएबल फ़ॉन्ट विभिन्न वेट वाली 10–20 अलग-अलग फ़ाइलों को बदल सकता है। ऐसी फ़ाइल का आकार लगभग 1–2 स्थिर फ़ाइलों के बराबर होता है। समर्थन: iOS 11+, Android 10+, Flutter (FontVariation के माध्यम से), React Native (कस्टम लाइब्रेरी के माध्यम से)।

संपीड़न और ऑन-डिमांड लोडिंग

फ़ॉन्ट आकार को 30–50% कम करने के लिए WOFF2 का उपयोग करें। API 29 वाले Android पर, WOFF2 का सीधे उपयोग किया जा सकता है। iOS के लिए, पंजीकरण से पहले WOFF2 को TTF में बदलना आवश्यक है। केवल ऑनबोर्डिंग के दौरान या विशिष्ट स्क्रीन पर उपयोग किए जाने वाले फ़ॉन्ट को ऑन-डिमांड संसाधनों (iOS) या Dynamic Feature (Android) के माध्यम से लोड किया जाना चाहिए — वे बेस APK में शामिल नहीं होंगे।

प्रदर्शन और सर्वोत्तम अभ्यास

कस्टम फ़ॉन्ट दो तरीकों से प्रदर्शन को प्रभावित करते हैं: लोडिंग समय और मेमोरी। पहली एक्सेस पर, सिस्टम डिस्क से फ़ाइल पढ़ता है, फ़ॉन्ट तालिकाओं को पार्स करता है और रेंडरिंग के लिए आंतरिक संरचनाएँ बनाता है। 1 MB फ़ॉन्ट के लिए, इसमें 20–50 ms लगते हैं। पहली लोड के बाद कैशिंग बाद की एक्सेस में देरी को समाप्त करती है।

मेमोरी: प्रत्येक लोड किया गया फ़ॉन्ट प्रक्रिया कैश में संग्रहीत होता है। सिस्टम फ़ॉन्ट प्रीलोडेड होते हैं; कस्टम फ़ॉन्ट पहले उपयोग पर लोड होते हैं। मेमोरी में, एक फ़ॉन्ट पार्स की गई संरचनाओं: cmap, glyf, head, hmtx तालिकाओं के कारण डिस्क की तुलना में लगभग 2–3 गुना अधिक स्थान लेता है। औसत आकार के 5 कस्टम फ़ॉन्ट (कुल 3 MB) के लिए, लगभग 6–9 MB RAM की आवश्यकता होती है।

सिफ़ारिशें

कस्टम फ़ॉन्ट को प्रति एप्लिकेशन 2–3 परिवारों तक सीमित करें। कई वेट को बदलने के लिए वेरिएबल फ़ॉन्ट का उपयोग करें। UI तत्वों (बटन, लेबल, सूची) के लिए सिस्टम फ़ॉन्ट लागू करें और केवल एक्सेंट टाइपोग्राफी (हेडिंग, बैनर) के लिए कस्टम फ़ॉन्ट का उपयोग करें। Android पर Map के माध्यम से Typeface कैश करें और iOS पर स्थैतिक चर के माध्यम से UIFont कैश करें।

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)
}

onBindViewHolder में Typeface लोड करना केवल कैशिंग के साथ स्वीकार्य है। कैश के बिना, प्रत्येक createFromAsset कॉल एक नया ऑब्जेक्ट बनाती है और डिस्क से फ़ाइल पढ़ती है। RecyclerView स्क्रॉलिंग के दौरान, यह ध्यान देने योग्य अंतराल का कारण बनता है। कैश समस्या को हल करता है क्योंकि फ़ॉन्ट एक बार लोड होता है और पुन: उपयोग किया जाता है।