Menggunakan font

Halaman ini menjelaskan cara menyetel font di aplikasi Compose Anda.

Setel font

Text memiliki parameter fontFamily untuk mengizinkan penyetelan font yang digunakan dalam composable. Secara default, jenis font serif, sans-serif, monospace, dan kursif disertakan:

@Composable
fun DifferentFonts() {
    Column {
        Text("Hello World", fontFamily = FontFamily.Serif)
        Text("Hello World", fontFamily = FontFamily.SansSerif)
    }
}
TextSnippets.kt

Kata-kata

Anda dapat menggunakan atribut fontFamily untuk menggunakan font dan typeface kustom ditentukan dalam folder res/font:

Penggambaran grafis dari folder res > font di lingkungan pengembangan

Contoh ini menunjukkan cara menentukan fontFamily berdasarkan font tersebut file dan menggunakan fungsi Font:

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)
)
TextSnippets.kt

Anda dapat meneruskan fontFamily ini ke composable Text. Karena seorang fontFamily dapat menyertakan bobot yang berbeda, Anda dapat menyetel fontWeight secara manual ke pilih ketebalan yang tepat untuk teks Anda:

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)
}
TextSnippets.kt

Kata-kata

Untuk mempelajari cara menetapkan tipografi di seluruh aplikasi Anda, lihat Sistem desain kustom di Compose.

Font yang dapat didownload

Memulai di Compose 1.2.0, Anda dapat menggunakan API font yang dapat didownload di aplikasi Compose untuk mendownload aplikasi Google font secara asinkron dan menggunakannya dalam aplikasi Anda.

Dukungan untuk font yang dapat didownload yang disediakan oleh penyedia kustom saat ini tidak tersedia.

Menggunakan font yang dapat didownload secara terprogram

Untuk mendownload font secara terprogram dari dalam aplikasi, ikuti langkah-langkah berikut:

  1. Tambahkan dependensi:

    Groovy

    dependencies {
    ...
    implementation "androidx.compose.ui:ui-text-google-fonts:1.6.8"
}

    Kotlin

    dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.6.8")
}
  2. Lakukan inisialisasi pada GoogleFont.Provider dengan kredensial untuk Google Fonts: 
    val provider = GoogleFont.Provider(
    providerAuthority = "com.google.android.gms.fonts",
    providerPackage = "com.google.android.gms",
    certificates = R.array.com_google_android_gms_fonts_certs
)
    TextDownloadableFontsSnippets.kt
    Parameter yang diterima penyedia adalah:
    • Otoritas penyedia font untuk Google Fonts.
    • Paket penyedia font untuk memverifikasi identitas penyedia.
    • Daftar serangkaian hash untuk sertifikat guna memverifikasi identitas penyedia. Anda dapat menemukan hash yang diperlukan untuk penyedia Google Fonts dalam file font_certs.xml di Aplikasi contoh Jetchat.
  3. Definisikan 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)
)
    TextDownloadableFontsSnippets.kt
    Anda dapat meminta parameter lain untuk {i>font<i} Anda seperti ketebalan dan gaya dengan FontWeight dan FontStyle masing-masing: 
    // ...
 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
    )
)
    TextDownloadableFontsSnippets.kt
  4. Konfigurasikan FontFamily agar digunakan dalam fungsi composable Text:

Text(
    fontFamily = fontFamily, text = "Hello World!"
)
TextDownloadableFontsSnippets.kt

Anda juga bisa menentukan Tipografi yang akan digunakan FontFamily Anda:

val MyTypography = Typography(
    labelMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp/*...*/
    ),
    labelLarge = TextStyle(
        fontFamily = fontFamily,
        fontWeight = FontWeight.Bold,
        letterSpacing = 2.sp,
        /*...*/
    ),
    displayMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.SemiBold/*...*/
    ),
    /*...*/
)
TextDownloadableFontsSnippets.kt

Selanjutnya, setel Tipografi ke tema aplikasi Anda:

MyAppTheme(
    typography = MyTypography
)/*...*/
TextDownloadableFontsSnippets.kt

Untuk contoh aplikasi yang mengimplementasikan font yang dapat didownload di Compose bersama dengan Material3, lihat aplikasi contoh Jetchat.

Menambahkan font pengganti

Anda dapat menentukan rantai penggantian untuk font jika font gagal mengunduh dengan benar. Misalnya, jika Anda menentukan {i>font<i} yang dapat diunduh seperti ini:

// ...
 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)
)
TextDownloadableFontsSnippets.kt

Anda dapat menentukan default font Anda untuk kedua ketebalan seperti ini:

// ...
 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)
)
TextDownloadableFontsSnippets.kt

Pastikan Anda menambahkan impor yang benar.

Menentukan FontFamily seperti ini akan membuat FontFamily yang berisi dua rantai, satu rantai per ketebalan. Mekanisme pemuatan akan mencoba menyelesaikan {i>font<i} {i>online<i} terlebih dahulu, kemudian font yang berada di folder resource R.font lokal Anda.

Men-debug penerapan Anda

Untuk membantu memverifikasi apakah font didownload dengan benar, Anda dapat menentukan pengendali coroutine debug. Pengendali akan memberikan perilaku yang harus dilakukan jika font gagal dimuat secara asinkron.

Mulai dengan membuat CoroutineExceptionHandler:

val handler = CoroutineExceptionHandler { _, throwable ->
    // process the Throwable
    Log.e(TAG, "There has been an issue: ", throwable)
}
TextDownloadableFontsSnippets.kt

Teruskan createFontFamilyResolver agar resolver menggunakan pengendali baru:

CompositionLocalProvider(
    LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler)
) {
    Column {
        Text(
            text = "Hello World!", style = MaterialTheme.typography.bodyMedium
        )
    }
}
TextDownloadableFontsSnippets.kt

Anda juga dapat menggunakan isAvailableOnDevice API dari penyedia untuk menguji apakah penyedia tersedia dan sertifikat dikonfigurasi dengan benar. Untuk melakukannya, Anda dapat memanggil metode isAvailableOnDevice yang menghasilkan nilai false jika penyedia salah dikonfigurasi.

val context = LocalContext.current
LaunchedEffect(Unit) {
    if (provider.isAvailableOnDevice(context)) {
        Log.d(TAG, "Success!")
    }
}
TextDownloadableFontsSnippets.kt

Peringatan

Google Fonts memerlukan waktu beberapa bulan untuk menyediakan font baru di Android. Ada celah waktu antara ketika {i>font<i} ditambahkan dalam fonts.google.com dan jika tersedia melalui API font yang dapat didownload (baik di sistem View atau di Compose). Baru font yang ditambahkan mungkin gagal dimuat di aplikasi Anda dengan IllegalStateException Untuk membantu pengembang mengidentifikasi {i>error<i} ini dibandingkan jenis kesalahan pemuatan {i>font<i} lainnya, kami menambahkan pesan deskriptif untuk pengecualian di Compose dengan perubahan di sini. Jika Anda menemukan masalah, laporkan menggunakan masalah tersebut pelacak.

Menggunakan font variabel

{i>Font<i} variabel adalah format {i>font<i} yang memungkinkan satu file {i>font<i} berisi berbagai gaya. Dengan font variabel, Anda dapat mengubah sumbu (atau parameter) untuk membuat gaya yang Anda sukai. Sumbu ini dapat bersifat standar, seperti tebal, lebar, miring, dan miring, atau khusus, yang berbeda di berbagai font variabel.

Lima konfigurasi font variabel yang sama dengan nilai sumbu berbeda.
Gambar 1. Teks menggunakan font variabel yang sama yang disesuaikan dengan sumbu yang berbeda nilai-nilai.

Menggunakan font variabel, alih-alih file font biasa, memungkinkan Anda hanya memiliki satu file font, bukan beberapa.

Untuk informasi lebih lanjut tentang font variabel, lihat Google Fonts Pengetahuan, seluruh katalog font variabel, dan tabel sumbu yang didukung untuk setiap {i>font<i}.

Dokumen ini menunjukkan cara menerapkan font variabel di aplikasi Compose Anda.

Memuat font variabel

  1. Download font variabel yang ingin Anda gunakan (misalnya Roboto Flex) dan tempatkan di folder app/res/font di aplikasi Anda. Pastikan bahwattf yang Anda tambahkan adalah versi font variabel dari font, dan nama file font Anda menggunakan huruf kecil semua dan tidak berisi karakter khusus.

  2. Untuk memuat font variabel, tentukan FontFamily menggunakan font yang ditempatkan di Direktori res/font/:

    // 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),
            )
        )
    )
    VariableFontsSnippets.kt

    API FontVariation memungkinkan Anda mengonfigurasi sumbu font standar seperti bobot, lebar, dan miring. Ini adalah sumbu standar yang tersedia dengan font variabel apa pun. Anda bisa membuat berbagai konfigurasi dari {i>font<i} berdasarkan di mana {i>font<i} akan digunakan.

  3. Font variabel hanya tersedia untuk Android versi O dan yang lebih baru, jadi tambahkan pagar pembatas dan mengonfigurasi penggantian yang sesuai:

    // 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
}
    VariableFontsSnippets.kt

  4. Ekstrak pengaturan ke dalam satu set konstanta untuk penggunaan kembali yang lebih mudah dan ganti pengaturan font dengan konstanta ini:

    // 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
}
    VariableFontsSnippets.kt

  5. Konfigurasikan tipografi Desain Material 3 untuk menggunakan FontFamily:

    // Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = displayLargeFontFamily,
        fontSize = 50.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp,
        /***/
    )
)
    VariableFontsSnippets.kt

    Contoh ini menggunakan displayLarge tipografi Material 3, yang memiliki perbedaan setelan font default dan penggunaan yang disarankan. Misalnya, Anda harus menggunakan displayLarge untuk teks singkat yang penting, karena ini adalah teks terbesar di layar.

    Dengan Material 3, Anda dapat mengubah nilai default TextStyle dan fontFamily untuk menyesuaikan tipografi Anda. Dalam cuplikan di atas, Anda mengonfigurasi instance TextStyle untuk menyesuaikan setelan font bagi setiap jenis font.

  6. Setelah Anda menentukan tipografi, teruskan ke MaterialTheme M3:

    MaterialTheme(
    colorScheme = MaterialTheme.colorScheme,
    typography = Typography,
    content = content
)
    VariableFontsSnippets.kt

  7. Terakhir, gunakan composable Text dan tentukan gaya ke salah satu gaya yang ditentukan gaya tipografi, 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
                )
            }
        }
    }
}
    VariableFontsSnippets.kt

    Setiap composable Text dikonfigurasi melalui gaya dan tema Material-nya berisi konfigurasi font variabel yang berbeda. Anda dapat menggunakan MaterialTheme.typography untuk mengambil tipografi yang disediakan ke M3 Composable MaterialTheme.

Tiga teks berbeda, semuanya menampilkan konfigurasi font yang berbeda.
Gambar 2. Font variabel diterapkan dalam tiga konfigurasi berbeda.

Menggunakan sumbu kustom

Font juga dapat memiliki sumbu khusus. Ini ditentukan di dalam file font itu sendiri. Misalnya, font Roboto Flex memiliki sumbu tinggi ascender ("YTAS"), yang menyesuaikan tinggi ascender huruf kecil, sedangkan lebar penghitung ("XTRA") akan menyesuaikan lebar setiap huruf.

Anda dapat mengubah nilai sumbu ini dengan setelan FontVariation.

Untuk informasi selengkapnya tentang sumbu kustom yang dapat Anda konfigurasi untuk font, lihat tabel sumbu yang didukung untuk setiap font.

  1. Untuk menggunakan sumbu kustom, tentukan fungsi untuk ascenderHeight kustom dan counterWidth sumbu:

    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())
}
    VariableFontsSnippets.kt

    Fungsi ini melakukan hal berikut:

    • Tentukan pagar pembatas untuk nilai yang dapat diterima. Seperti yang dapat Anda lihat di Katalog font variabel, ascenderHeight (YTAS) memiliki nilai minimum 649f dan maksimum 854f.
    • Menampilkan setelan font sehingga konfigurasi siap ditambahkan ke font. Di beberapa metode FontVariation.Setting(), nama sumbu (YTAS, XTRA) adalah di-hardcode, dan mengambil nilainya sebagai parameter.

  2. Menggunakan sumbu dengan konfigurasi font, teruskan parameter tambahan ke setiap Font yang dimuat:

    @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
}
    VariableFontsSnippets.kt

    Perhatikan bahwa tinggi ascender huruf kecil sekarang ditambah, dan teks lainnya lebih lebar:

Tiga teks berbeda yang menampilkan konfigurasi berbeda untuk font variabel, dengan sumbu kustom yang ditetapkan— beberapa teks memiliki huruf kecil yang lebih tinggi dan lebih lebar daripada sebelumnya.
Gambar 3. Teks yang menampilkan sumbu kustom yang disetel pada font variabel.

Referensi lainnya

Untuk mengetahui informasi selengkapnya, lihat postingan blog berikut tentang font variabel: