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 personalizadas
definidas na pasta res/font
:
Este exemplo mostra como você definiria um fontFamily
com base nesses arquivos de
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
ao elemento combinável Text
. Como um
fontFamily
pode incluir pesos diferentes, é possível definir fontWeight
manualmente para
selecionar o peso certo para o 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
A partir do Compose 1.2.0, é possível usar a API de fontes para download no app Compose para fazer o download de Fontes do Google de forma assíncrona e usá-las no app.
O suporte para fontes para download fornecidas por provedores personalizados não está disponível no momento.
Usar fontes para download de forma programática
Para fazer o download de uma fonte de forma programática no seu app, siga estas etapas:
- Adicione a dependência:
Groovy
dependencies { ... implementation "androidx.compose.ui:ui-text-google-fonts:1.6.1" }
Kotlin
dependencies { ... implementation("androidx.compose.ui:ui-text-google-fonts:1.6.1") }
- 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. Você encontra os hashes necessários para o provedor do Google Fonts
no arquivo
font_certs.xml
do app de exemplo Jetchat.
- Defina uma
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) )
É possível consultar outros parâmetros para 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
que será usado na sua função combinável de texto:
Text( fontFamily = fontFamily, text = "Hello World!" )
Você também pode definir a
Tipografia para usar
a 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 como o tema do app:
MyAppTheme( typography = MyTypography )/*...*/
Para conferir um exemplo de app que está implementando fontes para download no Compose com o Material3, consulte o app de exemplo Jetchat (link em inglês).
Adicionar fontes substitutas
Você pode determinar uma cadeia de substitutos para sua fonte caso o download da fonte não seja feito corretamente. Por exemplo, se você tiver a fonte para download definida desta forma:
// ... 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á resolver primeiro a fonte on-line
e, em seguida, a fonte localizada na pasta local de recursos R.font
.
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) }
Transmita-o para o método
createFontFamilyResolver
para que o resolvedor o 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 retornará "false" 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 o momento em que uma fonte é adicionada em
fonts.google.com e quando ela é disponibilizada na
API de fontes para download, no sistema de visualização ou no Compose. As fontes
recém-adicionadas podem não ser carregadas no seu app 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 algum problema, informe-o usando o Issue
Tracker.
Usar fontes variáveis
Uma fonte variável é um formato de fonte que permite que um arquivo de fonte contenha estilos diferentes. Com fontes variáveis, é possível modificar os eixos (ou parâmetros) para gerar o estilo que preferir. Esses eixos podem ser padrão, como peso, largura, inclinação e itálico, ou personalizados, que diferem entre as fontes variáveis.
O uso de fontes variáveis em vez de arquivos de fontes normais permite que você tenha apenas um arquivo de fonte em vez de vários.
Para saber mais sobre fontes variáveis, consulte Google Fonts Knowledge, o catálogo completo de fontes variáveis disponíveis e uma tabela dos eixos compatíveis com 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 variável que você quer usar (por exemplo, Roboto Flex) e coloque-a na pasta
app/res/font
do app. Confira se o arquivo .ttf
que você adiciona é a versão de fonte variável da fonte e que o nome do 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 peso, largura e inclinação. Esses são eixos padrão disponíveis para qualquer fonte variável. Você pode criar diferentes configurações da fonte com base em onde ela será usada.As fontes variáveis estão disponíveis apenas para as versões do Android O e mais recentes. Portanto, adicione uma proteção e configure um substituto adequado:
// 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 por 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 (link em inglês) 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
displayLarge
do Material 3 (link em inglês), que tem diferentes configurações de fonte padrão e usos recomendados. Por exemplo, usedisplayLarge
para textos curtos e essenciais, já que é o maior texto na tela.Com o Material 3, é possível mudar os valores padrão de
TextStyle
efontFamily
para personalizar sua tipografia. No snippet acima, você configura instâncias deTextStyle
para personalizar as configurações de fonte de cada família de fontes.Agora que você definiu a tipografia, transmita-a para o
MaterialTheme
do M3:MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
Por fim, use um elemento combinável
Text
e especifique o estilo para um dos estilos de tipografia definidos,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 elemento combinável
Text
é configurado com o estilo do tema do Material e contém uma configuração de fonte variável diferente. Você pode usarMaterialTheme.typography
para recuperar a tipografia fornecida ao elemento combinávelMaterialTheme
do M3.
Usar eixos personalizados
As fontes também podem ter eixos personalizados. Elas são definidas 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 em minúsculas, enquanto a largura do contador ("XTRA"
)
ajusta a largura de cada letra.
É possível alterar o valor desses eixos com as configurações de FontVariation
.
Para saber mais sobre os eixos personalizados que podem ser configurados para uma fonte, consulte a tabela de eixos compatíveis com cada fonte.
Para usar eixos personalizados, defina funções para os eixos
ascenderHeight
ecounterWidth
personalizados: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 é possível conferir no
catálogo de fontes variáveis,
ascenderHeight (YTAS)
tem um valor mínimo de649f
e máximo de854f
. - Retorne a configuração de fonte, para que a configuração esteja pronta para ser adicionada à fonte. No
método
FontVariation.Setting()
, o nome do eixo (YTAS, XTRA
) está fixado no código e usa o valor como um parâmetro.
- Defina proteções para os valores que eles podem aceitar. Como é possível conferir no
catálogo de fontes variáveis,
Usando os eixos com a configuração de fonte, transmita outros parâmetros para 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 das ascendentes em minúsculas agora aumentou, e o outro texto está mais largo:
Outros recursos
Para mais informações, veja 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