মোবাইল ডেভেলপমেন্টে কাস্টম ফন্ট — এটি কী, ফরম্যাট এবং ব্যবহার

কাস্টম ফন্ট কী?

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) যোগ করা হয়।

নিবন্ধনের পরে, ফন্টটি তার PostScript নাম ব্যবহার করে UIFont(name:size:) এর মাধ্যমে অ্যাক্সেসযোগ্য হয়। 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 সময় নেয়। প্রথম লোডের পরে ক্যাশিং পরবর্তী অ্যাক্সেসে বিলম্ব দূর করে।

মেমোরি: প্রতিটি লোড করা ফন্ট প্রসেস ক্যাশে সংরক্ষিত হয়। সিস্টেম ফন্ট প্রিলোডেড; কাস্টম ফন্ট প্রথম ব্যবহারে লোড হয়। মেমোরিতে, একটি ফন্ট পার্স করা স্ট্রাকচারের কারণে ডিস্কের তুলনায় প্রায় 2–3 গুণ বেশি স্থান নেয়: cmap, glyf, head, hmtx টেবিল। গড় আকারের 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 স্ক্রল করার সময়, এটি লক্ষণীয় পিছিয়ে যাওয়ার কারণ হয়। ক্যাশ সমস্যার সমাধান করে কারণ ফন্ট একবার লোড হয় এবং পুনরায় ব্যবহার করা হয়।