इस पेज पर, Compose ऐप्लिकेशन में फ़ॉन्ट सेट करने का तरीका बताया गया है.
फ़ॉन्ट सेट करना
Text में fontFamily पैरामीटर होता है. इसकी मदद से, कंपोज़ेबल में इस्तेमाल किए जाने वाले फ़ॉन्ट को सेट किया जा सकता है. डिफ़ॉल्ट रूप से, serif, sans-serif, monospace, और cursive फ़ॉन्ट फ़ैमिली शामिल होती हैं:
@Composable fun DifferentFonts() { Column { Text("Hello World", fontFamily = FontFamily.Serif) Text("Hello World", fontFamily = FontFamily.SansSerif) } }
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) )
इस 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) }
अपने पूरे ऐप्लिकेशन में टाइपोग्राफ़ी सेट करने का तरीका जानने के लिए, Compose में कस्टम डिज़ाइन सिस्टम देखें.
ऐसे फ़ॉन्ट जिन्हें डाउनलोड किया जा सकता है
Compose 1.2.0 से, अपने Compose ऐप्लिकेशन में डाउनलोड किए जा सकने वाले फ़ॉन्ट एपीआई का इस्तेमाल करके, Google Fonts को एसिंक्रोनस तरीके से डाउनलोड किया जा सकता है और उन्हें अपने ऐप्लिकेशन में इस्तेमाल किया जा सकता है.
फ़िलहाल, कस्टम प्रोवाइडर से डाउनलोड किए जा सकने वाले फ़ॉन्ट इस्तेमाल नहीं किए जा सकते.
प्रोग्राम के हिसाब से, डाउनलोड किए जा सकने वाले फ़ॉन्ट इस्तेमाल करना
अपने ऐप्लिकेशन में प्रोग्राम के हिसाब से फ़ॉन्ट डाउनलोड करने के लिए, यह तरीका अपनाएं:
- डिपेंडेंसी जोड़ें:
Groovy
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") }
- 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फ़ाइल में मिल सकते हैं.
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 ) )
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 एपीआई का इस्तेमाल करके भी यह जांच की जा सकती है कि सेवा देने वाली कंपनी उपलब्ध है या नहीं और सर्टिफ़िकेट सही तरीके से कॉन्फ़िगर किए गए हैं या नहीं. ऐसा करने के लिए, isAvailableOnDevice तरीके को कॉल किया जा सकता है. अगर प्रोवाइडर को गलत तरीके से कॉन्फ़िगर किया गया है, तो यह तरीका गलत नतीजे दिखाता है.
val context = LocalContext.current LaunchedEffect(Unit) { if (provider.isAvailableOnDevice(context)) { Log.d(TAG, "Success!") } }
सीमाएं
Google Fonts को Android पर नए फ़ॉन्ट उपलब्ध कराने में कई महीने लगते हैं.
fonts.google.com में कोई फ़ॉन्ट जोड़ने और डाउनलोड किए जा सकने वाले फ़ॉन्ट के एपीआई (व्यू सिस्टम या Compose में) के ज़रिए उसके उपलब्ध होने के बीच कुछ समय का अंतर होता है. नए जोड़े गए फ़ॉन्ट, आपके ऐप्लिकेशन में लोड न हो पाएं. ऐसा होने पर, आपको IllegalStateException दिखेगा.
डेवलपर को फ़ॉन्ट लोड होने से जुड़ी अन्य गड़बड़ियों के मुकाबले इस गड़बड़ी की पहचान करने में मदद करने के लिए, हमने Compose में अपवाद के बारे में ज़्यादा जानकारी देने वाला मैसेज जोड़ा है. यहां दिए गए बदलावों के साथ यह मैसेज जोड़ा गया है.
अगर आपको कोई समस्या मिलती है, तो Issue Tracker का इस्तेमाल करके उसकी शिकायत करें.
वैरिएबल फ़ॉन्ट इस्तेमाल करना
वैरिएबल फ़ॉन्ट, एक ऐसा फ़ॉन्ट फ़ॉर्मैट है जिसमें एक ही फ़ॉन्ट फ़ाइल में अलग-अलग स्टाइल शामिल हो सकती हैं. वैरिएबल फ़ॉन्ट की मदद से, ऐक्सिस (या पैरामीटर) में बदलाव करके अपनी पसंद की स्टाइल जनरेट की जा सकती है. ये ऐक्सिस स्टैंडर्ड हो सकते हैं, जैसे कि वेट, विड्थ, स्लांट, और इटैलिक. इसके अलावा, ये कस्टम भी हो सकते हैं, जो अलग-अलग वैरिएबल फ़ॉन्ट के हिसाब से अलग-अलग होते हैं.
रेगुलर फ़ॉन्ट फ़ाइलों के बजाय वैरिएबल फ़ॉन्ट का इस्तेमाल करने से, आपको कई फ़ॉन्ट फ़ाइलों के बजाय सिर्फ़ एक फ़ॉन्ट फ़ाइल की ज़रूरत होती है.
वैरिएबल फ़ॉन्ट के बारे में ज़्यादा जानने के लिए, Google Fonts Knowledge पर जाएं. यहां आपको उपलब्ध वैरिएबल फ़ॉन्ट का पूरा कैटलॉग और हर फ़ॉन्ट के लिए, इस्तेमाल किए जा सकने वाले ऐक्सिस की टेबल मिलेगी.
इस दस्तावेज़ में, Compose ऐप्लिकेशन में वैरिएबल फ़ॉन्ट लागू करने का तरीका बताया गया है.
वैरिएबल फ़ॉन्ट लोड करना
आपको जो वैरिएबल फ़ॉन्ट इस्तेमाल करना है उसे डाउनलोड करें (उदाहरण के लिए, Roboto Flex) और उसे अपने ऐप्लिकेशन के
app/res/fontफ़ोल्डर में सेव करें. पक्का करें कि .ttfजोड़ी गई फ़ाइल, फ़ॉन्ट का वैरिएबल फ़ॉन्ट वर्शन है. साथ ही, आपकी फ़ॉन्ट फ़ाइल का नाम अंग्रेज़ी के छोटे अक्षरों में है और उसमें कोई खास वर्ण नहीं है.वैरिएबल फ़ॉन्ट लोड करने के लिए,
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एपीआई की मदद से, स्टैंडर्ड फ़ॉन्ट ऐक्सिस को कॉन्फ़िगर किया जा सकता है. जैसे, वेट, विड्थ, और स्लांट. ये स्टैंडर्ड ऐक्सिस हैं, जो किसी भी वैरिएबल फ़ॉन्ट के साथ उपलब्ध होते हैं. फ़ॉन्ट का इस्तेमाल कहां किया जाएगा, इसके आधार पर फ़ॉन्ट के अलग-अलग कॉन्फ़िगरेशन बनाए जा सकते हैं.वैरिएबल फ़ॉन्ट, सिर्फ़ 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 }
सेटिंग को कॉन्स्टेंट के सेट में बदलें, ताकि उन्हें आसानी से फिर से इस्तेमाल किया जा सके. साथ ही, फ़ॉन्ट की सेटिंग को इन कॉन्स्टेंट से बदलें:
// 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 }
FontFamilyका इस्तेमाल करने के लिए, मटीरियल डिज़ाइन 3 टाइपोग्राफ़ी को कॉन्फ़िगर करें:// Type.kt val Typography = Typography( displayLarge = TextStyle( fontFamily = displayLargeFontFamily, fontSize = 50.sp, lineHeight = 64.sp, letterSpacing = 0.sp, /***/ ) )
इस सैंपल में
displayLargeMaterial 3 टाइपोग्राफ़ी का इस्तेमाल किया गया है. इसमें डिफ़ॉल्ट फ़ॉन्ट की अलग-अलग सेटिंग और इस्तेमाल के सुझाव दिए गए हैं. उदाहरण के लिए, आपको छोटे और ज़रूरी टेक्स्ट के लिएdisplayLargeका इस्तेमाल करना चाहिए, क्योंकि यह स्क्रीन पर सबसे बड़ा टेक्स्ट होता है.Material 3 की मदद से,
TextStyleऔरfontFamilyकी डिफ़ॉल्ट वैल्यू बदली जा सकती हैं. इससे आपको अपनी टाइपोग्राफ़ी को पसंद के मुताबिक बनाने में मदद मिलेगी. ऊपर दिए गए स्निपेट में, हर फ़ॉन्ट फ़ैमिली के लिए फ़ॉन्ट सेटिंग को पसंद के मुताबिक बनाने के लिए,TextStyleके इंस्टेंस कॉन्फ़िगर किए जाते हैं.टाइपोग्राफ़ी तय करने के बाद, इसे M3
MaterialThemeको पास करें:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
आखिर में,
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कंपोज़ेबल को उसकी मटीरियल थीम की स्टाइल के हिसाब से कॉन्फ़िगर किया जाता है. साथ ही, इसमें अलग-अलग वैरिएबल फ़ॉन्ट कॉन्फ़िगरेशन होता है.MaterialTheme.typographyका इस्तेमाल करके, M3MaterialThemeकंपोज़ेबल को दी गई टाइपोग्राफ़ी को वापस पाया जा सकता है.
कस्टम ऐक्सिस का इस्तेमाल करना
फ़ॉन्ट में कस्टम ऐक्सिस भी हो सकते हैं. इन्हें फ़ॉन्ट फ़ाइल में ही तय किया जाता है.
उदाहरण के लिए, Roboto Flex फ़ॉन्ट में असेंडर हाइट ("YTAS") ऐक्सिस होता है. इससे लोअरकेस असेंडर की ऊंचाई को अडजस्ट किया जाता है. वहीं, काउंटर विड्थ ("XTRA") से हर अक्षर की चौड़ाई को अडजस्ट किया जाता है.
FontVariation सेटिंग की मदद से, इन ऐक्सिस की वैल्यू बदली जा सकती है.
किसी फ़ॉन्ट के लिए कॉन्फ़िगर किए जा सकने वाले कस्टम ऐक्सिस के बारे में ज़्यादा जानने के लिए, हर फ़ॉन्ट के लिए इस्तेमाल किए जा सकने वाले ऐक्सिस की टेबल देखें.
कस्टम ऐक्सिस का इस्तेमाल करने के लिए, कस्टम
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) हार्डकोड किया गया है. साथ ही, यह वैल्यू को पैरामीटर के तौर पर लेता है.
- यह तय करें कि वे कौनसी वैल्यू स्वीकार कर सकते हैं. जैसा कि वैरिएबल फ़ॉन्ट कैटलॉग में देखा जा सकता है,
फ़ॉन्ट कॉन्फ़िगरेशन के साथ ऐक्सिस का इस्तेमाल करके, लोड किए गए हर
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 }
ध्यान दें कि अंग्रेज़ी के छोटे अक्षरों के असेंडर की ऊंचाई अब बढ़ गई है और अन्य टेक्स्ट ज़्यादा चौड़ा है:
अन्य संसाधन
ज़्यादा जानकारी के लिए, वैरिएबल फ़ॉन्ट के बारे में यह ब्लॉग पोस्ट पढ़ें:
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
- Compose में उपलब्ध संसाधन
- टेक्स्ट को स्टाइल करना
- Compose में मटीरियल डिज़ाइन 2