Trabalhar com fontes

Esta página descreve como definir fontes no app Compose.

Definir fonte

Text tem um parâmetro fontFamily para permitir a configuração da fonte usada no elemento combinável. Por padrão, as famílias de fontes Serif, Sans Serif, fontes monoespaçadas e cursivas estão incluídas:

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

As palavras

Você pode usar o atributo fontFamily para trabalhar com fontes e famílias tipográficas personalizadas. definido na pasta res/font:

Representação gráfica da pasta "res > font" do ambiente de desenvolvimento

Este exemplo mostra como definir uma fontFamily com base nessa fonte e usando a função 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

Você pode transmitir esse fontFamily para o elemento combinável Text. Como um fontFamily pode incluir pesos diferentes. Defina fontWeight manualmente como selecione o peso certo para seu texto:

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

As palavras

Para aprender a definir a tipografia em todo o app, consulte Sistemas de design personalizados no Compose.

Fontes para download

Como iniciar no Compose 1.2.0, você pode usar a API de fontes disponível para download no app Compose para fazer o download de fontes de fontes assíncronas e usá-las no seu app.

No momento, não há suporte para fontes para download fornecidas por fornecedores personalizados.

Usar fontes para download de maneira programática

Para fazer o download de uma fonte de forma programática no app, siga estas etapas:

  1. Adicione a dependência:

    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. Inicialize o GoogleFont.Provider com as credenciais do 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
    Os parâmetros que o provedor recebe são:
    • A autoridade de provedor de fontes para a biblioteca Google Fonts.
    • O pacote de provedor de fontes para confirmar a identidade do provedor.
    • Uma lista de conjuntos de hashes para que os certificados confirmem a identidade do provedor. É possível encontrar os hashes necessários para o provedor do Google Fonts no arquivo font_certs.xml do App de exemplo Jetchat.
  3. Defina um 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
    Você pode consultar outros parâmetros da sua fonte, como peso e estilo, usando FontWeight e FontStyle respectivamente: 
    // ...
 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. Configure o FontFamily para ser usada na função combinável Text:

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

Também é possível definir Tipografia para usar seu FontFamily:

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

Em seguida, defina a tipografia para o tema do seu app:

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

Exemplo de um app que implementa fontes para download no Compose com Material3, consulte o app de exemplo Jetchat.

Adicionar fontes substitutas

Você pode determinar uma cadeia de substitutos para sua fonte caso ela falhe fazer o download corretamente. Por exemplo, se você tiver definido a fonte para download assim:

// ...
 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

Você pode definir os padrões da fonte para os dois pesos:

// ...
 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

Verifique se você está adicionando as importações corretas.

Essa definição cria uma FontFamily contendo duas cadeias, uma para cada peso. O mecanismo de carregamento tentará primeiro resolver a fonte on-line, e a fonte localizada na pasta de recursos R.font local.

Depurar sua implementação

Para verificar se o download da fonte está sendo feito corretamente, defina um gerenciador de corrotina de depuração. Ele fornece o comportamento do que fazer caso a fonte não carregue de forma assíncrona.

Comece criando um CoroutineExceptionHandler

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

Passe-o para o createFontFamilyResolver para que o resolvedor use o novo gerenciador:

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

Você também pode usar a API isAvailableOnDevice do provedor para testar se ele está disponível e se os certificados estão configurados corretamente. Para fazer isso, chame o método isAvailableOnDevice. que retorna falso se o provedor estiver configurado incorretamente.

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

Avisos

A biblioteca Google Fonts leva vários meses para disponibilizar novas fontes no Android. Há um intervalo de tempo entre quando uma fonte é adicionada fonts.google.com e quando estão disponíveis pelo a API de fontes para download (no sistema de visualização ou no Compose). Recém-chegado fontes adicionadas podem não ser carregadas no aplicativo com uma IllegalStateException Para ajudar os desenvolvedores a identificar esse erro em relação a outros tipos de erros de carregamento de fonte, adicionamos mensagens descritivas para a exceção no Compose com as mudanças aqui. Se você encontrar problemas, informe-os usando o formulário de rastreador.

Usar fontes variáveis

Uma fonte variável é um formato de fonte que permite que um arquivo de fonte contenha diferentes estilos. Com fontes variáveis, é possível modificar eixos (ou parâmetros) para gerar seu estilo preferido. Esses eixos podem ser padrão, como peso, largura, inclinação, e itálico ou personalizado, que diferem entre fontes variáveis.

Cinco configurações da mesma fonte de variável com valores de eixo diferentes.
Figura 1. Texto com a mesma fonte de variável personalizada com eixo diferente valores.

Usar fontes variáveis em vez de arquivos de fontes regulares permite que você tenha apenas uma arquivo de fonte em vez de várias.

Para mais informações sobre fontes variáveis, acesse Fontes do Google Conhecimento, todo o catálogo de fontes variáveis e uma tabela dos eixos suportados para cada fonte.

Este documento mostra como implementar uma fonte variável no app Compose.

Carregar uma fonte variável

  1. Faça o download da fonte da variável que quer usar (por exemplo, Roboto Flex) e coloque-o na pasta app/res/font do app. Verifique se o arquivo .ttf de arquivo adicionado é a versão da fonte variável da fonte, e o nome da o arquivo de fonte está todo em letras minúsculas e não contém caracteres especiais.

  2. Para carregar uma fonte variável, defina um FontFamily usando a fonte colocada no Diretório 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

    A API FontVariation permite configurar eixos de fonte padrão, como weight, width e slant. Esses são eixos padrão que são disponível com qualquer fonte variável. É possível criar diferentes configurações do com base no local em que ela será usada.

  3. Fontes variáveis só estão disponíveis para Android O e versões mais recentes, então adicione uma proteger e configurar um substituto apropriado:

    // 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. Extraia as configurações em um conjunto de constantes para facilitar a reutilização e substitua as configurações de fonte com estas constantes:

    // 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. Configure a tipografia do Material Design 3 para usar o FontFamily:

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

    Este exemplo usa a tipografia do Material 3 (link em inglês) displayLarge, que tem diferentes as configurações de fonte padrão e os usos recomendados. Por exemplo, use displayLarge para texto curto e crítico, já que é o maior texto na tela.

    Com o Material 3, é possível mudar os valores padrão de TextStyle e fontFamily para personalizar a tipografia. No snippet acima, você configura instâncias de TextStyle para personalizar as configurações de fonte de cada família.

  6. Agora que você definiu a tipografia, transmita-a para a MaterialTheme do M3:

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

  7. Por fim, use um elemento combinável Text e especifique o estilo como uma das estilos de tipografia, 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

    Cada Text é configurado usando o estilo do tema do Material Design e contém uma configuração de fonte variável diferente. Você pode usar MaterialTheme.typography para extrair a tipografia fornecida ao M3 combinável MaterialTheme.

Três textos diferentes, todos mostrando diferentes configurações de fonte.
Figura 2. Fonte variável aplicada em três configurações diferentes.

Usar eixos personalizados

As fontes também podem ter eixos personalizados. Eles são definidos no próprio arquivo de fontes. Por exemplo, a fonte Roboto Flex tem o eixo de altura do ascendente ("YTAS"), que ajusta a altura dos ascendentes minúsculos, enquanto a largura do contador ("XTRA") ajusta a largura de cada letra.

É possível alterar o valor desses eixos nas configurações FontVariation.

Para mais informações sobre os eixos personalizados que você pode configurar para uma fonte, consulte a tabela de eixos compatíveis para cada fonte.

  1. Para usar eixos personalizados, defina funções para os ascenderHeight e counterWidth eixos:

    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

    Essas funções fazem o seguinte:

    • Defina proteções para os valores que eles podem aceitar. Como você pode ver, Catálogo de fontes variáveis, ascenderHeight (YTAS) tem um valor mínimo de 649f e máximo de 854f.
    • Retorne a configuração da fonte para que a configuração esteja pronta para ser adicionada à fonte. Em método FontVariation.Setting(), o nome do eixo (YTAS, XTRA) será fixado no código e aceita o valor como parâmetro.

  2. Usando os eixos com a configuração da fonte, transmita mais parâmetros ao cada Font carregado:

    @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

    Observe que a altura dos ascendentes minúsculos agora é aumentada, e a outro texto é mais amplo:

Três textos diferentes mostrando configurações diferentes para fontes variáveis, com eixos personalizados definidos. Alguns têm ascendentes menores e são mais largos do que antes.
Figura 3. Texto mostrando eixos personalizados definidos em fontes variáveis.

Outros recursos

Para mais informações, consulte a seguinte postagem do blog sobre fontes variáveis: