Not so easy although.
Customized fonts breathe life into the app as every font displays its distinctive model id. Establishing customized fonts on Android and iOS is comparatively easy, however in Compose Multiplatform it may be harder. Simplify the method and make it simpler so that you can obtain a seamless model expertise.
Step 1:
After including all of the cross-platform Compose dependencies, you possibly can allow useful resource assist by including the next experimental library dependency. It requires you to opt-in to make use of it. ️🌟
(Word: Please verify the most recent documentation for any updates or adjustments concerning useful resource assist in Compose Multiplatform.)
@OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
implementation(compose.elements.sources)
Step 2:
After sync, go to Shared/Frequent Essential folder and create a sources folder. On this folder, create one other folder named fonts. Now simply copy and paste the fonts you need into this newly created fonts folder.
Step 3:
Now, usually in Android you’ll do it like this,
personal val Nunito = FontFamily(
Font(R.font.nunito_regular),
Font(R.font.nunito_semibold),
Font(R.font.nunito_bold, weight = FontWeight.ExtraBold)
)
val NunitoTypography = Typography(
h1 = TextStyle(
fontFamily = Nunito,
fontWeight = FontWeight.SemiBold,
fontSize = 52.sp,
),
h2 = TextStyle(fontFamily = Nunito, fontWeight = FontWeight.Daring, fontSize = 24.sp),
h3 = TextStyle(
fontFamily = Nunito,
fontWeight = FontWeight.Daring,
fontSize = 18.sp,
),
h4 = TextStyle(
fontFamily = Nunito,
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp,
),
h5 = TextStyle(fontFamily = Nunito, fontWeight = FontWeight.Daring, fontSize = 14.sp),
h6 = TextStyle(
fontFamily = Nunito,
fontWeight = FontWeight.SemiBold,
fontSize = 12.sp,
),
subtitle1 = TextStyle(
fontFamily = Nunito,
fontWeight = FontWeight.W500,
fontSize = 16.sp,
),
subtitle2 = TextStyle(
fontFamily = Nunito,
fontWeight = FontWeight.W400,
fontSize = 14.sp,
),
body1 = TextStyle(fontFamily = Nunito, fontWeight = FontWeight.Regular, fontSize = 14.sp),
body2 = TextStyle(fontFamily = Nunito, fontSize = 10.sp),
button = TextStyle(
fontFamily = Nunito, fontWeight = FontWeight.W400, fontSize = 15.sp, colour = OnPrimary
),
caption = TextStyle(fontFamily = Nunito, fontWeight = FontWeight.Regular, fontSize = 8.sp),
overline = TextStyle(fontFamily = Nunito, fontWeight = FontWeight.W400, fontSize = 12.sp)
)
however this does not work in Compose cross platform 🙁
Step 4:
let’s do some actual expectation magic.
@Composable
count on enjoyable font(title: String, res: String, weight: FontWeight, fashion: FontStyle): Font
Within the Android Essential module, we are going to create the precise implementation for the customized fonts. It is easy; we get font useful resource utilizing context and return FontRequest. With this implementation, you possibly can seamlessly use your customized font in your Android software.
@Composable
precise enjoyable font(title: String, res: String, weight: FontWeight, fashion: FontStyle): Font {
val context = LocalContext.present
val id = context.sources.getIdentifier(res, "font", context.packageName)
return Font(id, weight, fashion)
}
let’s do the ios half,
personal val cache: MutableMap = mutableMapOf()
@OptIn(ExperimentalResourceApi::class)
@Composable
precise enjoyable font(title: String, res: String, weight: FontWeight, fashion: FontStyle): Font {
return cache.getOrPut(res) {
val byteArray = runBlocking {
useful resource("font/$res.ttf").readBytes()
}
androidx.compose.ui.textual content.platform.Font(res, byteArray, weight, fashion)
}
}
This perform hurries up the usage of customized fonts by caching them. If the identical font is requested once more, it will likely be retrieved from the cache as a substitute of loaded from scratch. For brand spanking new fonts, it is going to load them from sources and cache them for future use. This optimization enhances the efficiency of the appliance and creates a smoother person interface when coping with totally different font types and weights.
should you even have compose desktop then add this to essential desktop,
@Composable
precise enjoyable font(title: String, res: String, weight: FontWeight, fashion: FontStyle): Font =
androidx.compose.ui.textual content.platform.Font("font/$res.ttf", weight, fashion)
and now you might be prepared to make use of customized fonts in your cross-platform editor software.
Step 5:
Now you possibly can outline customized typography in your theme like this.
val nunitoRegular = FontFamily(
font(
"Nunito", "nunito_regular", FontWeight.Regular, FontStyle.Regular
)
)
val nunitoSemiBold = FontFamily(
font(
"Nunito", "nunito_semibold", FontWeight.Regular, FontStyle.Regular
)
)
val nunitoBold = FontFamily(
font(
"Nunito", "nunito_bold", FontWeight.Regular, FontStyle.Regular
)
)
As you possibly can see, we’re presently utilizing the count on perform we created font() and use it to load the font and create a font household object. We are able to then use it to outline customized typefaces. This may then be used inside your doc theme.
val typo = Typography(
h1 = TextStyle(
fontFamily = nunitoBold,
fontWeight = FontWeight.Daring,
fontSize = 52.sp,
),
h2 = TextStyle(fontFamily = nunitoBold, fontWeight = FontWeight.Daring, fontSize = 24.sp),
h3 = TextStyle(
fontFamily = nunitoBold,
fontWeight = FontWeight.Daring,
fontSize = 18.sp,
),
h4 = TextStyle(
fontFamily = nunitoBold,
fontWeight = FontWeight.Daring,
fontSize = 16.sp,
),
h5 = TextStyle(fontFamily = nunitoBold, fontWeight = FontWeight.Daring, fontSize = 14.sp),
h6 = TextStyle(
fontFamily = nunitoSemiBold,
fontWeight = FontWeight.SemiBold,
fontSize = 12.sp,
),
subtitle1 = TextStyle(
fontFamily = nunitoSemiBold,
fontWeight = FontWeight.SemiBold,
fontSize = 16.sp,
),
subtitle2 = TextStyle(
fontFamily = nunitoRegular,
fontWeight = FontWeight.Regular,
fontSize = 14.sp,
),
body1 = TextStyle(
fontFamily = nunitoRegular, fontWeight = FontWeight.Regular, fontSize = 14.sp
),
body2 = TextStyle(fontFamily = nunitoRegular, fontSize = 10.sp),
button = TextStyle(
fontFamily = nunitoRegular,
fontWeight = FontWeight.Regular,
fontSize = 15.sp,
colour = OnPrimary
),
caption = TextStyle(
fontFamily = nunitoRegular, fontWeight = FontWeight.Regular, fontSize = 8.sp
),
overline = TextStyle(
fontFamily = nunitoRegular, fontWeight = FontWeight.Regular, fontSize = 12.sp
)
)
Step 6:
Add this line to your cocoa pods.
extraSpecAttributes["resources"] = "['src/commonMain/resources/**', 'src/iosMain/resources/**']"
Add these to the android block in your shared module’s construct.gradle.
sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
sourceSets["main"].res.srcDirs("src/androidMain/res", "src/commonMain/sources")
Final step:
Now we will use typography in our materials theme.
MaterialTheme(
colours = LightColorPalette, typography = typography, shapes = Shapes, content material = content material
)Consequence:
Chances are you’ll get your ios app useful resource not discovered exception, you simply have to do pod set up and it will likely be fastened.
That might be all for at the moment. Blissful coding ❤ ❤ ❤
Implementation might be discovered right here:
Get impressed by this template
Keep linked on Twitter