Roboto is the default font utilized by Materials 3. Nevertheless, we frequently need to change it for our app. As an alternative of manually copying the font asset, now you can obtain the Google font asynchronously and use them in your Jetpack Compose app.
It is a fast information to altering the default Roboto font to Arvo font.
1. Add the dependency
construct.gradle.kts instance
dependencies {
implementation("androidx.compose.ui:ui-text-google-fonts:1.3.2")
}
2. Copy font_cert.xml
Copy the font-cert.xml to your resvalues folder.
3. Create Font Supplier
In Kind.kt, create the GoogleFont.Supplier
:
@OptIn(ExperimentalTextApi::class)
personal val fontProvider = GoogleFont.Supplier(
providerAuthority = "com.google.android.gms.fonts",
providerPackage = "com.google.android.gms",
certificates = R.array.com_google_android_gms_fonts_certs
)
4. Create Google Font
Search the Google Font that you just wish to use right here. On this instance, we’ll use Arvo font.
Not all fonts are supported, so you could attempt them by your self. If the font will not be supported, it reverts to Roboto font.
In Kind.kt, create the GoogleFont
:
@OptIn(ExperimentalTextApi::class)
personal val googleFont = GoogleFont("Arvo")
5. Create Font Household
In Kind.kt, create the FontFamily
:
@OptIn(ExperimentalTextApi::class)
personal val fontFamily = FontFamily(
Font(googleFont = googleFont, fontProvider = fontProvider)
)
6. Override the Typography
In Kind.kt, overrides fontFamily
within the Typography
:
personal val typography = Typography()
val Typography = Typography(
displayLarge = typography.displayLarge.copy(fontFamily = fontFamily),
displayMedium = typography.displayMedium.copy(fontFamily = fontFamily),
displaySmall = typography.displaySmall.copy(fontFamily = fontFamily),
headlineLarge = typography.headlineLarge.copy(fontFamily = fontFamily),
headlineMedium = typography.headlineMedium.copy(fontFamily = fontFamily),
headlineSmall = typography.headlineSmall.copy(fontFamily = fontFamily),
titleLarge = typography.titleLarge.copy(fontFamily = fontFamily),
titleMedium = typography.titleMedium.copy(fontFamily = fontFamily),
titleSmall = typography.titleSmall.copy(fontFamily = fontFamily),
bodyLarge = typography.bodyLarge.copy(fontFamily = fontFamily),
bodyMedium = typography.bodyMedium.copy(fontFamily = fontFamily),
bodySmall = typography.bodySmall.copy(fontFamily = fontFamily),
labelLarge = typography.labelLarge.copy(fontFamily = fontFamily),
labelMedium = typography.labelMedium.copy(fontFamily = fontFamily),
labelSmall = typography.labelSmall.copy(fontFamily = fontFamily),
)
7. Use the brand new Typograph
Be certain that in your Theme.kt, the newly created Typography
above is handed to the MaterialTheme()
. Instance:
@Composable
enjoyable YourAppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
useSystemUIController: Boolean = true,
content material: @Composable () -> Unit
) {
MaterialTheme(
colorScheme = colorScheme,
shapes = Shapes,
typography = Typography,
content material = content material,
)
}
Reference
Downloadable fonts (from the official doc)
Instance
GitHub Repository: YouTubeWorkouts