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) } }
Você pode usar o atributo fontFamily
para trabalhar com fontes e famílias tipográficas personalizadas.
definido na pasta res/font
:
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) )
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) }
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:
- 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") }
- 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 )
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.
- 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) )
Você pode consultar outros parâmetros da sua fonte, como peso e estilo, usandoFontWeight
eFontStyle
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 ) )
- Configure o
FontFamily
para ser usada na função combinável Text:
Text( fontFamily = fontFamily, text = "Hello World!" )
![](https://developer.android.google.cn/static/develop/ui/compose/images/text-dl-fontfamily.png?authuser=6&hl=pt)
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/*...*/ ), /*...*/ )
Em seguida, defina a tipografia para o tema do seu app:
MyAppTheme( typography = MyTypography )/*...*/
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) )
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) )
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) }
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 ) } }
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!") } }
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.](https://developer.android.google.cn/static/develop/ui/compose/images/text/vf-configs.png?authuser=6&hl=pt)
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
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.Para carregar uma fonte variável, defina um
FontFamily
usando a fonte colocada no Diretóriores/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), ) ) )
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.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 }
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 }
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, /***/ ) )
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, usedisplayLarge
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
efontFamily
para personalizar a tipografia. No snippet acima, você configura instâncias deTextStyle
para personalizar as configurações de fonte de cada família.Agora que você definiu a tipografia, transmita-a para a
MaterialTheme
do M3:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
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 ) } } } }
Cada
Text
é configurado usando o estilo do tema do Material Design e contém uma configuração de fonte variável diferente. Você pode usarMaterialTheme.typography
para extrair a tipografia fornecida ao M3 combinávelMaterialTheme
.
![Três textos diferentes, todos mostrando diferentes configurações de fonte.](https://developer.android.google.cn/static/develop/ui/compose/images/text/vf-standard-axes.png?authuser=6&hl=pt)
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.
Para usar eixos personalizados, defina funções para os
ascenderHeight
ecounterWidth
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()) }
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 de649f
e máximo de854f
. - 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.
- Defina proteções para os valores que eles podem aceitar. Como você pode ver,
Catálogo de fontes variáveis,
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 }
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.](https://developer.android.google.cn/static/develop/ui/compose/images/text/vf-custom-axes.png?authuser=6&hl=pt)
Outros recursos
Para mais informações, consulte a seguinte postagem do blog sobre fontes variáveis:
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Recursos no Compose
- Estilizar texto
- Material Design 2 no Compose