फ़ॉन्ट के साथ काम करें

इस पेज पर, Compose ऐप्लिकेशन में फ़ॉन्ट सेट करने का तरीका बताया गया है.

फ़ॉन्ट सेट करना

Text में fontFamily पैरामीटर होता है, ताकि कंपोज़ेबल में इस्तेमाल किए गए फ़ॉन्ट को सेट किया जा सके. डिफ़ॉल्ट रूप से, सेरिफ़, Sans-Serif, monospace, और कर्सिव फ़ॉन्ट फ़ैमिली शामिल हैं:

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

शब्द

res/font फ़ोल्डर में तय किए गए कस्टम फ़ॉन्ट और टाइपफ़ेस के साथ काम करने के लिए, fontFamily एट्रिब्यूट का इस्तेमाल किया जा सकता है:

डेवलपमेंट एनवायरमेंट में रिज़ॉल्यूशन > फ़ॉन्ट फ़ोल्डर की ग्राफ़िक इमेज

इस उदाहरण में बताया गया है कि 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)
)
TextSnippets.kt

आपके पास इस fontFamily को अपने Text कंपोज़ेबल में पास करने का विकल्प है. 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)
}
TextSnippets.kt

शब्द

अपने पूरे ऐप्लिकेशन में टाइपोग्राफ़ी सेट करने का तरीका जानने के लिए, Compose में कस्टम डिज़ाइन सिस्टम लेख पढ़ें.

ऐसे फ़ॉन्ट जिन्हें डाउनलोड किया जा सकता है

Compose के 1.2.0 वर्शन से, Compose ऐप्लिकेशन में डाउनलोड किए जा सकने वाले फ़ॉन्ट एपीआई का इस्तेमाल किया जा सकता है. इससे, Google फ़ॉन्ट को अलग-अलग क्रम में डाउनलोड करके, अपने ऐप्लिकेशन में इस्तेमाल किया जा सकता है.

फ़िलहाल, कस्टम फ़ॉन्ट उपलब्ध कराने वाली कंपनियों के डाउनलोड किए जा सकने वाले फ़ॉन्ट इस्तेमाल करने की सुविधा उपलब्ध नहीं है.

प्रोग्राम के हिसाब से, डाउनलोड किए जा सकने वाले फ़ॉन्ट इस्तेमाल करना

अपने ऐप्लिकेशन में प्रोग्राम के हिसाब से फ़ॉन्ट डाउनलोड करने के लिए, यह तरीका अपनाएं:

  1. डिपेंडेंसी जोड़ें:

    Groovy

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

    Kotlin

    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.5")
}
  2. GoogleFont.Provider को Google Fonts के लिए क्रेडेंशियल से शुरू करें: 
    val provider = GoogleFont.Provider(
    providerAuthority = "com.google.android.gms.fonts",
    providerPackage = "com.google.android.gms",
    certificates = R.array.com_google_android_gms_fonts_certs
)
    TextDownloadableFontsSnippets.kt
     सेवा देने वाली कंपनी को ये पैरामीटर मिलते हैं:
    • 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)
)
    TextDownloadableFontsSnippets.kt
     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
    )
)
    TextDownloadableFontsSnippets.kt
  4. अपने टेक्स्ट कॉम्पोज़ेबल फ़ंक्शन में इस्तेमाल किए जाने वाले FontFamily को कॉन्फ़िगर करें:

Text(
    fontFamily = fontFamily, text = "Hello World!"
)
TextDownloadableFontsSnippets.kt

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/*...*/
    ),
    /*...*/
)
TextDownloadableFontsSnippets.kt

इसके बाद, अपने ऐप्लिकेशन की थीम के लिए टाइपोग्राफ़ी सेट करें:

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

Material3 के साथ-साथ Compose में डाउनलोड किए जा सकने वाले फ़ॉन्ट लागू करने वाले ऐप्लिकेशन का उदाहरण देखने के लिए, 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)
)
TextDownloadableFontsSnippets.kt

इस तरह के दोनों वेट के लिए, अपने फ़ॉन्ट की डिफ़ॉल्ट सेटिंग तय की जा सकती है:

// ...
 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)
)
TextDownloadableFontsSnippets.kt

पक्का करें कि आपने सही इंपोर्ट जोड़े हों.

FontFamily को इस तरह से तय करने पर, एक FontFamily बनता है जिसमें दो चेन होती हैं, एक हर वज़न के लिए. कॉन्टेंट लोड करने का तरीका, पहले ऑनलाइन फ़ॉन्ट को रिज़ॉल्व करने की कोशिश करेगा. इसके बाद, वह आपके लोकल R.font रिसॉर्स फ़ोल्डर में मौजूद फ़ॉन्ट को रिज़ॉल्व करेगा.

लागू करने की प्रोसेस को डीबग करना

फ़ॉन्ट सही तरीके से डाउनलोड हो रहा है या नहीं, इसकी पुष्टि करने के लिए, डीबग कोरुटाइन हैंडलर तय किया जा सकता है. आपका हैंडल यह तय करता है कि अगर फ़ॉन्ट सिंक किए बिना लोड होता है, तो क्या करना है.

CoroutineExceptionHandler बनाकर शुरू करें:

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

इसे createFontFamilyResolver के तरीके में पास करें, ताकि रिज़ॉल्वर नए हैंडलर का इस्तेमाल कर सके:

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

प्रोवाइडर के isAvailableOnDevice एपीआई का इस्तेमाल करके भी यह जांच की जा सकती है कि प्रोवाइडर उपलब्ध है या नहीं और सर्टिफ़िकेट सही तरीके से कॉन्फ़िगर किए गए हैं या नहीं. ऐसा करने के लिए, isAvailableOnDevice का वह तरीका इस्तेमाल करें जो गलत तरीके से कॉन्फ़िगर किए गए प्रोवाइडर के लिए गलत वैल्यू दिखाता है.

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

सीमाएं

Google Fonts को Android पर नए फ़ॉन्ट उपलब्ध कराने में कई महीने लगते हैं. fonts.google.com पर कोई फ़ॉन्ट जोड़ने के बाद, उसे डाउनलोड किए जा सकने वाले Font API के ज़रिए उपलब्ध कराने के बीच थोड़ा अंतर होता है. फिर चाहे वह फ़ॉन्ट व्यू सिस्टम में हो या 'लिखें'. हो सकता है कि आपके ऐप्लिकेशन में, हाल ही में जोड़े गए फ़ॉन्ट IllegalStateException के साथ लोड न हों. फ़ॉन्ट लोड करने से जुड़ी अन्य गड़बड़ियों के मुकाबले, इस गड़बड़ी की पहचान करने में डेवलपर की मदद करने के लिए, हमने 'लिखें' टूल में अपवाद के लिए जानकारी देने वाला मैसेज जोड़ा है. इसमें किए गए बदलावों के बारे में यहां बताया गया है. अगर आपको कोई समस्या मिलती है, तो समस्या ट्रैकर का इस्तेमाल करके उसकी शिकायत करें.

वैरिएबल फ़ॉन्ट इस्तेमाल करना

वैरिएबल फ़ॉन्ट, एक ऐसा फ़ॉन्ट फ़ॉर्मैट है जिसमें एक फ़ॉन्ट फ़ाइल में अलग-अलग स्टाइल हो सकती हैं. वैरिएबल फ़ॉन्ट की मदद से, अपनी पसंद की स्टाइल जनरेट करने के लिए, ऐक्सिस (या पैरामीटर) में बदलाव किया जा सकता है. ये ऐक्सिस स्टैंडर्ड हो सकते हैं, जैसे कि वेट, चौड़ाई, स्लैंट, और इटैलिक या कस्टम, जो वैरिएबल फ़ॉन्ट के हिसाब से अलग-अलग होते हैं.

अलग-अलग ऐक्सिस वैल्यू वाले एक ही वैरिएबल फ़ॉन्ट के पांच कॉन्फ़िगरेशन.
पहला डायग्राम. अलग-अलग ऐक्सिस वैल्यू के साथ कस्टमाइज़ किए गए एक ही वैरिएबल फ़ॉन्ट का इस्तेमाल करने वाला टेक्स्ट.

सामान्य फ़ॉन्ट फ़ाइलों के बजाय वैरिएबल फ़ॉन्ट का इस्तेमाल करने पर, आपके पास एक से ज़्यादा के बजाय सिर्फ़ एक फ़ॉन्ट फ़ाइल होती है.

वैरिएबल फ़ॉन्ट के बारे में ज़्यादा जानने के लिए, 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),
            )
        )
    )
    VariableFontsSnippets.kt

    FontVariation एपीआई की मदद से, स्टैंडर्ड फ़ॉन्ट ऐक्सिस को कॉन्फ़िगर किया जा सकता है. जैसे, वेट, चौड़ाई, और स्लैंट. ये स्टैंडर्ड ऐक्सिस हैं, जो किसी भी वैरिएबल फ़ॉन्ट के साथ उपलब्ध हैं. फ़ॉन्ट का इस्तेमाल कहां किया जाएगा, इसके आधार पर फ़ॉन्ट के अलग-अलग कॉन्फ़िगरेशन बनाए जा सकते हैं.

  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
}
    VariableFontsSnippets.kt

  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
}
    VariableFontsSnippets.kt

  5. FontFamily का इस्तेमाल करने के लिए, Material Design 3 टाइपोग्राफ़ी को कॉन्फ़िगर करें:

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

    इस सैंपल में displayLarge Material 3 टाइपोग्राफ़ी का इस्तेमाल किया गया है. इसमें फ़ॉन्ट की अलग-अलग डिफ़ॉल्ट सेटिंग और इस्तेमाल के सुझाव मौजूद हैं. उदाहरण के लिए, आपको displayLarge का इस्तेमाल, कम शब्दों वाले अहम टेक्स्ट के लिए करना चाहिए, क्योंकि यह स्क्रीन पर सबसे बड़ा टेक्स्ट होता है.

    Material 3 की मदद से, टाइपोग्राफ़ी को पसंद के मुताबिक बनाने के लिए, TextStyle और fontFamily की डिफ़ॉल्ट वैल्यू बदली जा सकती हैं. ऊपर दिए गए स्निपेट में, हर फ़ॉन्ट फ़ैमिली के लिए फ़ॉन्ट सेटिंग को पसंद के मुताबिक बनाने के लिए, TextStyle के इंस्टेंस कॉन्फ़िगर किए गए हैं.

  6. आपने अपनी टाइपोग्राफ़ी तय कर ली है, तो अब उसे M3 MaterialTheme को पास करें:

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

  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
                )
            }
        }
    }
}
    VariableFontsSnippets.kt

    हर Text कंपोज़ेबल को उसकी मटीरियल थीम की स्टाइल से कॉन्फ़िगर किया जाता है और इसमें एक अलग वैरिएबल फ़ॉन्ट कॉन्फ़िगरेशन शामिल होता है. M3MaterialTheme कंपोज़ेबल में दिए गए टाइपोग्राफ़ी को वापस पाने के लिए, 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())
}
    VariableFontsSnippets.kt

    ये फ़ंक्शन ये काम करते हैं:

    • वे वैल्यू तय करें जिन्हें स्वीकार किया जा सकता है. जैसा कि वैरिएबल फ़ॉन्ट कैटलॉग में देखा जा सकता है. 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
}
    VariableFontsSnippets.kt

    ध्यान दें कि अब छोटे अक्षरों के एसेंडर की ऊंचाई बढ़ गई है और बाकी टेक्स्ट चौड़ा हो गया है:

वैरिएबल फ़ॉन्ट के लिए अलग-अलग कॉन्फ़िगरेशन दिखाने वाले तीन अलग-अलग टेक्स्ट. इनमें कस्टम ऐक्सिस सेट किए गए हैं. कुछ टेक्स्ट में छोटे अक्षर ज़्यादा बड़े हैं और पहले से ज़्यादा चौड़े हैं.
तीसरी इमेज. वैरिएबल फ़ॉन्ट पर सेट किए गए कस्टम ऐक्स दिखाने वाला टेक्स्ट.

अन्य संसाधन

ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में यह ब्लॉग पोस्ट देखें: