The right way to Implement Customized Fonts utilizing Downloadable Google Fonts?

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