আপনার 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 অ্যাপে ডাউনলোড করা যাবে এমন ফন্ট API ব্যবহার করে অ্যাসিঙ্ক্রোনাসভাবে Google Fonts ডাউনলোড করতে এবং আপনার অ্যাপে সেগুলি ব্যবহার করতে পারবেন।
কাস্টম প্রদানকারীর মাধ্যমে দেওয়া ডাউনলোড করা যাবে এমন ফন্টের জন্য সহায়তা বর্তমানে উপলভ্য নেই।
প্রোগ্রাম্যাটিক্যালি ডাউনলোড করা যায় এমন ফন্ট ব্যবহার করা
আপনার অ্যাপের মধ্যে থেকে প্রোগ্রাম্যাটিক্যালি কোনও ফন্ট ডাউনলোড করতে, এইসব ধাপ অনুসরণ করুন:
- নির্ভরতা যোগ করুন:
গ্ৰুভি
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
API ব্যবহার করে দেখতে পারেন যে পরিষেবা প্রদানকারী উপলভ্য আছে কিনা এবং সার্টিফিকেট সঠিকভাবে
কনফিগার করা হয়েছে কিনা। এটি করতে, আপনি isAvailableOnDevice মেথড কল করতে পারেন
যা প্রদানকারী ভুলভাবে কনফিগার করা থাকলে মিথ্যা রিটার্ন করে।
val context = LocalContext.current LaunchedEffect(Unit) { if (provider.isAvailableOnDevice(context)) { Log.d(TAG, "Success!") } }
Caveats
Android-এ নতুন ফন্ট উপলভ্য করতে Google Fonts-এর কয়েক মাস সময় লাগে।
fonts.google.com-এ ফন্ট যোগ করা এবং
ডাউনলোড করা যাবে এমন ফন্ট API-এর মাধ্যমে (ভিউ সিস্টেম বা কম্পোজে) সেটি উপলভ্য হওয়ার মধ্যে
সময়ের ব্যবধান থাকে। নতুন
যোগ করা ফন্ট আপনার অ্যাপে লোড নাও হতে পারে, সেক্ষেত্রে
IllegalStateException দেখানো হবে।
অন্যান্য ধরনের ফন্ট লোডিং সংক্রান্ত সমস্যার থেকে এই সমস্যাটি শনাক্ত করতে ডেভেলপারদের সাহায্য করার জন্য,
আমরা কম্পোজে ব্যতিক্রমের জন্য বর্ণনামূলক মেসেজিং যোগ করেছি এখানে
পরিবর্তন সহ।
আপনি কোনও সমস্যা দেখতে পেলে, ইস্যু ট্র্যাকার ব্যবহার করে
সেটি জানান।
ভেরিয়েবেল ফন্ট ব্যবহার করুন
ভেরিয়েবেল ফন্ট হল এমন একটি ফন্ট ফর্ম্যাট যা একটি ফন্ট ফাইলকে বিভিন্ন স্টাইল ধারণ করার অনুমতি দেয়। পরিবর্তনশীল ফন্টের সাহায্যে, আপনি নিজের পছন্দের স্টাইল তৈরি করতে অক্ষ (বা প্যারামিটার) পরিবর্তন করতে পারেন। এইসব অক্ষ স্ট্যান্ডার্ড হতে পারে, যেমন ওজন, প্রস্থ, স্ল্যান্ট এবং ইটালিক অথবা কাস্টম, যা বিভিন্ন ফন্ট জুড়ে আলাদা হয়।
রেগুলার ফন্ট ফাইলের পরিবর্তে ভেরিয়েবল ফন্ট ব্যবহার করলে, একাধিক ফন্ট ফাইলের পরিবর্তে আপনার কাছে একটিই ফন্ট ফাইল থাকবে।
ভেরিয়েবল ফন্ট সম্পর্কে আরও জানতে, 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), ) ) )
FontVariationAPI আপনাকে স্ট্যান্ডার্ড ফন্ট অ্যাক্সিস কনফিগার করার অনুমতি দেয়, যেমন ওয়েট, প্রস্থ এবং স্ল্যান্ট। এগুলি হল স্ট্যান্ডার্ড অক্ষ যা যেকোনও ভেরিয়েবল ফন্টের সাথে উপলভ্য। ফন্ট কোথায় ব্যবহার করা হবে তার উপর ভিত্তি করে আপনি ফন্টের বিভিন্ন কনফিগারেশন তৈরি করতে পারেন।ভেরিয়েবেল ফন্ট শুধুমাত্র 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ব্যবহার করতে Material Design 3 টাইপোগ্রাফি কনফিগার করুন:// Type.kt val Typography = Typography( displayLarge = TextStyle( fontFamily = displayLargeFontFamily, fontSize = 50.sp, lineHeight = 64.sp, letterSpacing = 0.sp, /***/ ) )
এই স্যাম্পেল
displayLargeমেটেরিয়াল ৩ টাইপোগ্রাফি ব্যবহার করে, যার আলাদা ডিফল্ট ফন্ট সেটিংস এবং সাজেস্ট করা ব্যবহার আছে। যেমন, ছোট, গুরুত্বপূর্ণ টেক্সটের জন্য আপনার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 }
লক্ষ্য করুন যে ছোট হাতের অ্যাসেন্ডারের উচ্চতা এখন বাড়ানো হয়েছে এবং অন্যান্য টেক্সট আরও চওড়া:
অতিরিক্ত রিসোর্স
আরও তথ্যের জন্য, ভেরিয়েবল ফন্ট সম্পর্কে নিম্নলিখিত ব্লগ পোস্ট দেখুন:
আপনার জন্য সাজেস্ট করা হয়েছে
- মনে রাখবেন: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট দেখানো হয়
- Compose-এ রিসোর্স
- স্টাইল টেক্সট
- Compose-এ Material Design 2