CODEWITHSUNDEEP
androidandroid-jetpack-compose
Android Newcomer
Android Newcomer

Reputation: 217

SansSerif FontFamily in jetpack compose

    android:fontFamily="sans-serif"           // roboto regular  
    android:fontFamily="sans-serif-light"     // roboto light  
    android:fontFamily="sans-serif-condensed" // roboto condensed  
    android:fontFamily="sans-serif-thin"      // roboto thin (android 4.2)  
    android:fontFamily="sans-serif-medium"    // roboto medium (android 5.0)

Is FontFamily.SansSerif same as Roboto font in Jetpack Compose also?

Upvotes: 5

Views: 3619

Answers (2)

hollmannlu
hollmannlu

Reputation: 404

You can reference all the roboto/system-fonts like this:

    Text(
        text = "Roboto Condensed Light",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif-condensed"), weight = FontWeight.Light)),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Condensed Regular",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif-condensed"))),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Condensed Medium",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif-condensed"), weight = FontWeight.Medium)),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Condensed Bold",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif"), weight = FontWeight.Bold)),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Thin",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif"), weight = FontWeight.Thin)),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Light",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif"), weight = FontWeight.Light)),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Regular",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif"))),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Bold",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif"), weight = FontWeight.Bold)),
        fontSize = 24.sp
    )
    Text(
        text = "Roboto Black",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif"), weight = FontWeight.Black)),
        fontSize = 24.sp
    )
    Text(
        text = "Noto Serif",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("serif"))),
        fontSize = 24.sp
    )
    Text(
        text = "Noto Serif Bold",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("serif"), weight = FontWeight.Bold)),
        fontSize = 24.sp
    )
    Text(
        text = "Droid Sans Mono",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("monospace"))),
        fontSize = 24.sp
    )
    Text(
        text = "Cutive Mono",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("serif-monospace"))),
        fontSize = 24.sp
    )
    Text(
        text = "Coming soon",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("casual"))),
        fontSize = 24.sp
    )
    Text(
        text = "Dancing Script",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("cursive"))),
        fontSize = 24.sp
    )
    Text(
        text = "Dancing Script Bold",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("cursive"), weight = FontWeight.Bold)),
        fontSize = 24.sp
    )
    Text(
        text = "Carrois Gothic SC",
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 16.dp),
        fontFamily = FontFamily(Font(DeviceFontFamilyName("sans-serif-smallcaps"))),
        fontSize = 24.sp
    )

screenshot

Upvotes: 3

Alejandra
Alejandra

Reputation: 882

The short answer is yes, referencing sans-serif is using Roboto, for Compose as well as for the old View-based UI system in Android.

In the context of Compose, it's important to understand that this is only true now and for Android. Roboto is a sans-serif typeface, and by referencing sans-serif you're really referring to the current sans-serif type the system you're working on uses. It could potentially change in the future. And it could be different if you're running the code in web or desktop (e.g. Helvetica).

Upvotes: 5

Related Questions