ফন্ট নিয়ে কাজ করা

আপনার Compose অ্যাপে কীভাবে ফন্ট সেট করবেন তা এই পৃষ্ঠায় বর্ণনা করা হয়েছে।

ফন্ট সেট করা

Text-এ fontFamily প্যারামিটার আছে যা কম্পোজ করার উপযুক্ত আইটেমে ব্যবহৃত ফন্ট সেট করার অনুমতি দেয়। ডিফল্ট হিসেবে, সেরিফ, সেরিফ ছাড়া, মোনোস্পেস ও কার্সিভ ফন্ট ফ্যামিলি অন্তর্ভুক্ত থাকে:

@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}

শব্দ

res/font ফোল্ডারে সংজ্ঞায়িত কাস্টম ফন্ট ও টাইপফেসের সাথে কাজ করতে আপনি fontFamily অ্যাট্রিবিউট ব্যবহার করতে পারবেন:

ডেভেলপমেন্ট এনভায়রনমেন্টে res > font ফোল্ডারের গ্রাফিক্যাল উপস্থাপনা

এই উদাহরণে দেখানো হয়েছে যে কীভাবে আপনি সেইসব ফন্ট ফাইল এবং Font ফাংশন ব্যবহার করে fontFamily নির্ধারণ করবেন:

val firaSansFamily = FontFamily(
    Font(R.font.firasans_light, FontWeight.Light),
    Font(R.font.firasans_regular, FontWeight.Normal),
    Font(R.font.firasans_italic, FontWeight.Normal, FontStyle.Italic),
    Font(R.font.firasans_medium, FontWeight.Medium),
    Font(R.font.firasans_bold, FontWeight.Bold)
)

আপনি এই fontFamily আপনার Text কম্পোজ করার উপযুক্ত আইটেমে পাস করতে পারবেন। কারণ, a fontFamily-এ বিভিন্ন গুরুত্ব অন্তর্ভুক্ত থাকতে পারে, তাই আপনার টেক্সটের জন্য সঠিক গুরুত্ব বেছে নিতে, আপনি ম্যানুয়ালি fontWeight-কে সেট করতে পারেন:

Column {
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Light)
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Normal)
    Text(
        text = "text",
        fontFamily = firaSansFamily,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Italic
    )
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Medium)
    Text(text = "text", fontFamily = firaSansFamily, fontWeight = FontWeight.Bold)
}

শব্দ

আপনার পুরো অ্যাপে কীভাবে টাইপোগ্রাফি সেট করতে হয় তা জানতে, Compose-এ কাস্টম ডিজাইন সিস্টেম দেখুন।

ডাউনলোড করা যায় এমন ফন্ট

Compose 1.2.0 থেকে শুরু করে, আপনার Compose অ্যাপে ডাউনলোড করা যায় এমন ফন্ট API ব্যবহার করে Google ফন্ট অ্যাসিঙ্ক্রোনাস পদ্ধতিতে ডাউনলোড করতে এবং আপনার অ্যাপে ব্যবহার করতে পারবেন।

কাস্টম প্রদানকারীর দেওয়া ডাউনলোডযোগ্য ফন্ট বর্তমানে কাজ করে না।

প্রোগ্রামাটিক উপায়ে ডাউনলোড করা যায় এমন ফন্ট ব্যবহার করা

আপনার অ্যাপের মধ্যে থেকে প্রোগ্রাম্যাটিক উপায়ে ফন্ট ডাউনলোড করতে, এইসব ধাপ অনুসরণ করুন:

  1. ডিপেন্ডেন্সি যোগ করুন:

    গ্ৰুভি

    dependencies {
        ...
        implementation "androidx.compose.ui:ui-text-google-fonts:1.12.1"
    }

    Kotlin

    dependencies {
        ...
        implementation("androidx.compose.ui:ui-text-google-fonts:1.12.1")
    }
  2. Google Fonts-এর ক্রেডেনশিয়াল দিয়ে GoogleFont.Provider ইনিশিয়ালাইজ করুন:
    val provider = GoogleFont.Provider(
        providerAuthority = "com.google.android.gms.fonts",
        providerPackage = "com.google.android.gms",
        certificates = R.array.com_google_android_gms_fonts_certs
    )
    প্রোভাইডার যেসব প্যারামিটার পান সেগুলি হল:
    • Google Fonts-এর জন্য ফন্ট প্রদানকারী কর্তৃপক্ষ।
    • প্রদানকারীর পরিচয় যাচাই করার জন্য ফন্ট প্রদানকারীর প্যাকেজ।
    • প্রদানকারীর পরিচয় যাচাই করার জন্য সার্টিফিকেটের হ্যাশের সেটগুলির একটি তালিকা। Google Fonts প্রদানকারীর জন্য প্রয়োজনীয় হ্যাশ আপনি Jetchat স্যাম্পেল অ্যাপের মধ্যে font_certs.xml ফাইলে খুঁজে পাবেন।
  3. ক FontFamily-এর সংজ্ঞা দিন:
    // ...
     import androidx.compose.ui.text.googlefonts.GoogleFont
     import androidx.compose.ui.text.font.FontFamily
     import androidx.compose.ui.text.googlefonts.Font
     // ...
    
    val fontName = GoogleFont("Lobster Two")
    
    val fontFamily = FontFamily(
        Font(googleFont = fontName, fontProvider = provider)
    )
    আপনি ফন্টের জন্য অন্যান্য প্যারামিটার কোয়েরি করতে পারেন, যেমন, ওজন ও স্টাইল। এর জন্য FontWeight এবং FontStyle ব্যবহার করুন:
    // ...
     import androidx.compose.ui.text.googlefonts.GoogleFont
     import androidx.compose.ui.text.font.FontFamily
     import androidx.compose.ui.text.googlefonts.Font
     // ...
    
    val fontName = GoogleFont("Lobster Two")
    
    val fontFamily = FontFamily(
        Font(
            googleFont = fontName,
            fontProvider = provider,
            weight = FontWeight.Bold,
            style = FontStyle.Italic
        )
    )
  4. আপনার টেক্সট কম্পোজ করার উপযুক্ত ফাংশনে ব্যবহার করার জন্য FontFamily কনফিগার করুন:

Text(
    fontFamily = fontFamily, text = "Hello World!"
)

এছাড়াও, আপনি টাইপোগ্রাফি নির্ধারণ করতে পারেন আপনার FontFamily:

val MyTypography = Typography(
    bodyMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp/*...*/
    ),
    bodyLarge = TextStyle(
        fontFamily = fontFamily,
        fontWeight = FontWeight.Bold,
        letterSpacing = 2.sp,
        /*...*/
    ),
    headlineMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.SemiBold/*...*/
    ),
    /*...*/
)

এরপরে, আপনার অ্যাপের থিম অনুযায়ী টাইপোগ্রাফি সেট করুন:

MyAppTheme(
    typography = MyTypography
)/*...*/

Compose-এ ডাউনলোড করা যায় এমন ফন্ট প্রয়োগ করা কোনও অ্যাপের উদাহরণ Material3-এর সাথে দেখতে Jetchat স্যাম্পেল অ্যাপ দেখুন।

ফলব্যাক ফন্ট যোগ করা

ফন্ট সঠিকভাবে ডাউনলোড করা না গেলে, আপনার ফন্টের জন্য ফলব্যাক চেইন নির্ধারণ করতে পারবেন। যেমন, আপনার ডাউনলোড করা যায় এমন ফন্ট যদি এইভাবে সংজ্ঞায়িত করা থাকে:

// ...
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider),
    Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold)
)

আপনি এই ধরনের দুটি ওয়েটের জন্য আপনার ফন্টের ডিফল্ট নির্ধারণ করতে পারবেন:

// ...
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.googlefonts.Font
 // ...

val fontName = GoogleFont("Lobster Two")

val fontFamily = FontFamily(
    Font(googleFont = fontName, fontProvider = provider),
    Font(resId = R.font.my_font_regular),
    Font(googleFont = fontName, fontProvider = provider, weight = FontWeight.Bold),
    Font(resId = R.font.my_font_regular_bold, weight = FontWeight.Bold)
)

আপনি সঠিক ইমপোর্ট যোগ করছেন কিনা তা নিশ্চিত করুন।

FontFamily-কে এইভাবে ডিফাইন করলে, FontFamily তৈরি হয় যার মধ্যে দুটি চেইন থাকে, প্রতিটি ওয়েটের জন্য একটি করে। লোডিং মেকানিজম প্রথমে অনলাইন ফন্ট সমাধান করার চেষ্টা করবে, এবং তারপরে আপনার স্থানীয় R.font রিসোর্স ফোল্ডারে থাকা ফন্ট।

আপনার প্রয়োগ করা কোড ডিবাগ করা

ফন্ট সঠিকভাবে ডাউনলোড করা হচ্ছে কিনা তা যাচাই করতে সাহায্য করার জন্য, আপনি একটি ডিবাগ করুটিন হ্যান্ডলার নির্ধারণ করতে পারেন। ফন্ট অ্যাসিঙ্ক্রোনাস লোড না হলে কী করতে হবে তা আপনার হ্যান্ডেল থেকে জানা যায়।

একটি CoroutineExceptionHandler তৈরি করার মাধ্যমে শুরু করুন:

val handler = CoroutineExceptionHandler { _, throwable ->
    // process the Throwable
    Log.e(TAG, "There has been an issue: ", throwable)
}

নতুন হ্যান্ডলার ব্যবহার করার জন্য রেজালভারকে createFontFamilyResolver মেথডে পাস করুন:

CompositionLocalProvider(
    LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler)
) {
    Column {
        Text(
            text = "Hello World!", style = MaterialTheme.typography.bodyMedium
        )
    }
}

এছাড়াও, পরিষেবা প্রদানকারী উপলভ্য আছে কিনা এবং সার্টিফিকেট সঠিকভাবে কনফিগার করা আছে কিনা তা পরীক্ষা করে দেখতে, আপনি পরিষেবা প্রদানকারীর isAvailableOnDevice API ব্যবহার করতে পারেন। এটি করতে, আপনি isAvailableOnDevice মেথড কল করতে পারেন যা প্রদানকারী ভুলভাবে কনফিগার করা থাকলে false রিটার্ন করে।

val context = LocalContext.current
LaunchedEffect(Unit) {
    if (provider.isAvailableOnDevice(context)) {
        Log.d(TAG, "Success!")
    }
}

Caveats

Android-এ নতুন ফন্ট উপলভ্য করতে Google Fonts-এর কয়েক মাস সময় লাগে। fonts.google.com-এ কোনও ফন্ট যোগ করা এবং ডাউনলোড করা যায় এমন ফন্ট API (View সিস্টেম বা Compose-এ) উপলভ্য হওয়ার মধ্যে কিছু সময় লাগে। নতুন যোগ করা ফন্ট আপনার অ্যাপে লোড নাও হতে পারে, এর সাথে একটি IllegalStateException থাকতে পারে। অন্যান্য ফন্ট লোডিং সংক্রান্ত সমস্যার তুলনায় এই সমস্যাটি শনাক্ত করতে ডেভেলপারদের সাহায্য করতে, Compose-এ ব্যতিক্রমের জন্য আমরা বর্ণনামূলক মেসেজিং যোগ করেছি এখানে পরিবর্তন সহ। আপনি কোনও সমস্যা খুঁজে পেলে, সমস্যা ট্র্যাকার ব্যবহার করে সেটির ব্যাপারে অভিযোগ জানান।

ভেরিয়েবল ফন্ট ব্যবহার করা

ভেরিয়েবল ফন্ট হল এমন একটি ফন্ট ফর্ম্যাট যা একটি ফন্ট ফাইলকে বিভিন্ন স্টাইল ধারণ করতে দেয়। ভেরিয়েবল ফন্টের সাহায্যে, আপনার পছন্দের স্টাইল তৈরি করতে অক্ষ (বা প্যারামিটার) পরিবর্তন করতে পারবেন। এইসব অ্যাক্সিস স্ট্যান্ডার্ড হতে পারে, যেমন ওজন, প্রস্থ, ঢাল, এবং ইটালিক বা কাস্টম, যা ভেরিয়েবল ফন্ট জুড়ে আলাদা হয়।

আলাদা আলাদা অ্যাক্সিস ভ্যালু সহ একই ভেরিয়েবল ফন্টের পাঁচটি কনফিগারেশন।
ছবি ১. আলাদা আলাদা অক্ষের ভ্যালু দিয়ে কাস্টমাইজ করা একই ভেরিয়েবল ফন্ট ব্যবহার করা টেক্সট।

সাধারণ ফন্ট ফাইলের পরিবর্তে ভেরিয়েবল ফন্ট ফাইল ব্যবহার করলে, একাধিক ফন্ট ফাইলের পরিবর্তে আপনাকে শুধু একটি ফন্ট ফাইল রাখতে হবে।

ভেরিয়েবল ফন্ট সম্পর্কে আরও জানতে, Google Fonts জ্ঞান, উপলভ্য ভেরিয়েবল ফন্টের সম্পূর্ণ ক্যাটালগ এবং প্রতিটি ফন্টের জন্য কাজ করে এমন অ্যাক্সিসের টেবিল দেখুন।

আপনার Compose অ্যাপে কীভাবে ভেরিয়েবল ফন্ট প্রয়োগ করবেন তা এই ডকুমেন্টে দেখানো হয়েছে।

ভেরিয়েবল ফন্ট লোড করা

  1. আপনি যে ভেরিয়েবল ফন্ট ব্যবহার করতে চান সেটি ডাউনলোড করুন (যেমন Roboto Flex) এবং আপনার অ্যাপের app/res/font ফোল্ডারে রাখুন। দেখে নেবেন যে .আপনার যোগ করা ttf ফাইলটি হল ফন্টের ভেরিয়েবল ফন্ট ভার্সন এবং আপনার ফন্ট ফাইলের নাম সম্পূর্ণ ছোট হাতের অক্ষরে লেখা এবং এতে কোনও বিশেষ অক্ষর নেই।

  2. ভেরিয়েবল ফন্ট লোড করতে, res/font/ ডিরেক্টরিতে থাকা ফন্ট ব্যবহার করে একটি FontFamily ডিফাইন করুন:

    // In Typography.kt
    @OptIn(ExperimentalTextApi::class)
    val displayLargeFontFamily =
        FontFamily(
            Font(
                R.font.robotoflex_variable,
                variationSettings = FontVariation.Settings(
                    FontVariation.weight(950),
                    FontVariation.width(30f),
                    FontVariation.slant(-6f),
                )
            )
        )

    FontVariation API আপনাকে ওজন, প্রস্থ ও ঢাল-এর মতো স্ট্যান্ডার্ড ফন্ট অ্যাক্সিস কনফিগার করতে দেয়। এগুলি হল স্ট্যান্ডার্ড অ্যাক্সিস যা যেকোনও ভেরিয়েবল ফন্টের সাথে উপলভ্য। ফন্ট কোথায় ব্যবহার করা হবে তার উপর ভিত্তি করে আপনি ফন্টের বিভিন্ন কনফিগারেশন তৈরি করতে পারবেন।

  3. ভেরিয়েবল ফন্ট শুধুমাত্র Android-এর O ও তার পরবর্তী যেকোনও ভার্সনে উপলভ্য, তাই একটি গার্ডরেল যোগ করুন এবং উপযুক্ত ফলব্যাক কনফিগার করুন:

    // In Typography.kt
    val default = FontFamily(
        /*
        * This can be any font that makes sense
        */
        Font(
            R.font.robotoflex_static_regular
        )
    )
    @OptIn(ExperimentalTextApi::class)
    val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        FontFamily(
            Font(
                R.font.robotoflex_variable,
                variationSettings = FontVariation.Settings(
                    FontVariation.weight(950),
                    FontVariation.width(30f),
                    FontVariation.slant(-6f),
                )
            )
        )
    } else {
        default
    }

  4. সহজে আবার ব্যবহার করার জন্য সেটিংসকে কনস্ট্যান্টের একটি সেটে এক্সট্র্যাক্ট করুন এবং এই কনস্ট্যান্ট দিয়ে ফন্ট সেটিংস পরিবর্তন করুন:

    // VariableFontDimension.kt
    object DisplayLargeVFConfig {
        const val WEIGHT = 950
        const val WIDTH = 30f
        const val SLANT = -6f
        const val ASCENDER_HEIGHT = 800f
        const val COUNTER_WIDTH = 500
    }
    
    @OptIn(ExperimentalTextApi::class)
    val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        FontFamily(
            Font(
                R.font.robotoflex_variable,
                variationSettings = FontVariation.Settings(
                    FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                    FontVariation.width(DisplayLargeVFConfig.WIDTH),
                    FontVariation.slant(DisplayLargeVFConfig.SLANT),
                )
            )
        )
    } else {
        default
    }

  5. FontFamily ব্যবহার করতে Material Design 3 টাইপোগ্রাফি কনফিগার করুন:

    // Type.kt
    val Typography = Typography(
        displayLarge = TextStyle(
            fontFamily = displayLargeFontFamily,
            fontSize = 50.sp,
            lineHeight = 64.sp,
            letterSpacing = 0.sp,
            /***/
        )
    )

    এই স্যাম্পেলে displayLarge Material 3 টাইপোগ্রাফি ব্যবহার করা হয়েছে, যার আলাদা ডিফল্ট ফন্ট সেটিংস ও সাজেস্ট করা ব্যবহার রয়েছে। যেমন, ছোট, গুরুত্বপূর্ণ টেক্সটের জন্য আপনাকে displayLarge ব্যবহার করতে হবে, কারণ এটি স্ক্রিনের সবচেয়ে বড় টেক্সট।

    Material 3-এর সাহায্যে, আপনার টাইপোগ্রাফি কাস্টমাইজ করতে, আপনি TextStyle এবং fontFamily-এর ডিফল্ট ভ্যালু পরিবর্তন করতে পারবেন। উপরের স্নিপেটে, আপনি প্রতিটি ফন্ট ফ্যামিলির জন্য ফন্ট সেটিংস কাস্টমাইজ করতে TextStyle-এর ইনস্ট্যান্স কনফিগার করেন।

  6. আপনি যেহেতু টাইপোগ্রাফি নির্ধারণ করেছেন, তাই এটি M3 MaterialTheme-এ পাস করুন:

    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme,
        typography = Typography,
        content = content
    )

  7. সবশেষে, একটি Text কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন এবং আগে থেকে সংজ্ঞায়িত টাইপোগ্রাফি স্টাইলের মধ্যে একটি স্টাইল নির্দিষ্ট করুন, MaterialTheme.typography.displayLarge:

    @Composable
    @Preview
    fun CardDetails() {
        MyCustomTheme {
            Card(
                shape = RoundedCornerShape(8.dp),
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Column(
                    modifier = Modifier.padding(16.dp)
                ) {
                    Text(
                        text = "Compose",
                        style = MaterialTheme.typography.displayLarge,
                        modifier = Modifier.padding(bottom = 8.dp),
                        maxLines = 1
                    )
                    Text(
                        text = "Beautiful UIs on Android",
                        style = MaterialTheme.typography.headlineMedium,
                        modifier = Modifier.padding(bottom = 8.dp),
                        maxLines = 2
                    )
                    Text(
                        text = "Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.",
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier.padding(bottom = 8.dp),
                        maxLines = 3
                    )
                }
            }
        }
    }

    প্রতিটি Text কম্পোজ করার উপযুক্ত আইটেমকে এর Material থিমের স্টাইলের মাধ্যমে কনফিগার করা হয় এবং এতে আলাদা আলাদা ভেরিয়েবল ফন্ট কনফিগারেশন থাকে। M3 MaterialTheme কম্পোজ করার উপযুক্ত আইটেমকে দেওয়া টাইপোগ্রাফি রিট্রিভ করতে আপনি MaterialTheme.typography ব্যবহার করতে পারবেন।

তিনটি আলাদা আলাদা টেক্সট, সবকটিই আলাদা আলাদা ফন্ট কনফিগারেশন দেখাচ্ছে।
ছবি ২. তিনটি আলাদা কনফিগারেশনে ভেরিয়েবল ফন্ট প্রয়োগ করা হয়েছে।

কাস্টম অ্যাক্সিস ব্যবহার করা

ফন্টে কাস্টম অ্যাক্সিসও থাকতে পারে। এগুলি ফন্ট ফাইলের মধ্যেই সংজ্ঞায়িত করা হয়। যেমন, Roboto Flex ফন্টে অ্যাসেন্ডার হাইট ("YTAS") অ্যাক্সিস আছে, যা ছোট হাতের অ্যাসেন্ডারের হাইট অ্যাডজাস্ট করে, অন্যদিকে কাউন্টার উইডথ ("XTRA") প্রতিটি অক্ষরের প্রস্থ অ্যাডজাস্ট করে।

আপনি FontVariation সেটিংসের মাধ্যমে এইসব অ্যাক্সিসের ভ্যালু পরিবর্তন করতে পারবেন।

কোনও ফন্টের জন্য কনফিগার করতে পারবেন এমন কাস্টম অ্যাক্সিস সম্পর্কে আরও জানতে, প্রতিটি ফন্টের জন্য সাপোর্ট করা অ্যাক্সিসের টেবিল দেখুন।

  1. কাস্টম অ্যাক্সিস ব্যবহার করতে, কাস্টম ascenderHeight এবং counterWidth অ্যাক্সিসের জন্য ফাংশন নির্ধারণ করুন:

    fun ascenderHeight(ascenderHeight: Float): FontVariation.Setting {
        require(ascenderHeight in 649f..854f) { "'Ascender Height' must be in 649f..854f" }
        return FontVariation.Setting("YTAS", ascenderHeight)
    }
    
    fun counterWidth(counterWidth: Int): FontVariation.Setting {
        require(counterWidth in 323..603) { "'Counter width' must be in 323..603" }
        return FontVariation.Setting("XTRA", counterWidth.toFloat())
    }

    এইসব ফাংশন নিম্নলিখিত কাজগুলি করে:

    • সেগুলি গ্রহণ করতে পারে এমন ভ্যালুর জন্য গার্ডরেল নির্ধারণ করুন। আপনি ভেরিয়েবেল ফন্ট ক্যাটালগে দেখতে পাচ্ছেন যে, ascenderHeight (YTAS)-এর সর্বনিম্ন ভ্যালু 649f এবং সর্বোচ্চ ভ্যালু 854f.
    • ফন্ট সেটিং ফিরিয়ে আনুন, যাতে কনফিগারেশন ফন্টে যোগ করার জন্য রেডি থাকে। FontVariation.Setting() পদ্ধতিতে, অক্ষের নাম (YTAS, XTRA) হার্ডকোড করা থাকে এবং এটি প্যারামিটার হিসেবে ভ্যালু নেয়।
  2. ফন্ট কনফিগারেশনের সাথে অক্ষ ব্যবহার করে, লোড করা প্রতিটি Font-এ অতিরিক্ত প্যারামিটার পাস করুন:

    @OptIn(ExperimentalTextApi::class)
    val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        FontFamily(
            Font(
                R.font.robotoflex_variable,
                variationSettings = FontVariation.Settings(
                    FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                    FontVariation.width(DisplayLargeVFConfig.WIDTH),
                    FontVariation.slant(DisplayLargeVFConfig.SLANT),
                    ascenderHeight(DisplayLargeVFConfig.ASCENDER_HEIGHT),
                    counterWidth(DisplayLargeVFConfig.COUNTER_WIDTH)
                )
            )
        )
    } else {
        default
    }

    লক্ষ্য করুন যে ছোট হাতের অক্ষরের অ্যাসেন্ডারের উচ্চতা এখন বেড়ে গেছে এবং অন্যান্য টেক্সট আরও চওড়া হয়ে গেছে:

তিনটি আলাদা টেক্সট, কাস্টম অ্যাক্সিস সেট করা ভেরিয়েবল ফন্টের জন্য আলাদা আলাদা কনফিগারেশন দেখাচ্ছে— কিছু টেক্সটে লোয়ারকেস অ্যাসেন্ডার বেশি এবং আগের চেয়ে চওড়া।
ছবি ৩. ভেরিয়েবল ফন্টে সেট করা কাস্টম অ্যাক্সিস দেখানো টেক্সট।

অতিরিক্ত রিসোর্স

আরও তথ্যের জন্য, ভেরিয়েবল ফন্ট সম্পর্কে নিম্নলিখিত ব্লগ পোস্ট দেখুন: