Jetpack Composeでダウンロード可能な Google Fontを使用してカスタム フォントを実装してみた
2023.07.02
Compose アプリでダウンロード可能なフォント API を使用して Google Fonts を非同期でダウンロードし、アプリで使用してみました。
依存関係を追加
build.gradle (.app)
dependencies {
・・・・
implementation "androidx.compose.ui:ui-text-google-fonts:1.4.3"
・・・・
}
font_cert.xmlをコピーする
font-cert.xml を res\valuesフォルダーにコピーします。
＊JetChat サンプルアプリの font_certs.xml ファイルをコピーする。
フォントプロバイダーの作成
ui.themフォルダの Type.kt ファイルに GoogleFont.Providerを作成する。
Type.kt
val provider = GoogleFont.Provider(
providerAuthority = "com.google.android.gms.fonts",
providerPackage = "com.google.android.gms",
certificates = R.array.com_google_android_gms_fonts_certs
)
Googleフォントを作成する
使用したい Google フォント を検索します。例では “Lobster” と “Josefin Sans” を使用します。
<注意>
フォントが fonts.google.com に追加されてから、ダウンロード可能なフォント API（ビューシステムまたは Compose）で利用できるようになるまでに時間的なずれがあるそうです。
サポートされているか試してみる必要があると思います。
Type.kt
val cusFont = GoogleFont("Lobster")
val cusFont2 = GoogleFont("Josefin Sans")
FontFamilyの作成
Type.kt
val cusFontFamily = FontFamily(
Font(
googleFont = cusFont,
fontProvider = provider
)
)
val cusFontFamily2 = FontFamily(
Font(
googleFont = cusFont2,
fontProvider = provider,
weight = FontWeight.Normal
),
Font(
googleFont = cusFont2,
fontProvider = provider,
weight = FontWeight.Medium,
style = FontStyle.Italic
),
Font(
googleFont = cusFont2,
fontProvider = provider,
weight = FontWeight.Bold
)
)
FontFamilyの設定
@Composable
fun Sample() {
Column {
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 30.dp, horizontal = 0.dp),
text = "Hello Jetpack Compose",
fontSize = 30.sp,
textAlign = TextAlign.Center
)
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 30.dp, horizontal = 0.dp),
text = "Hello Jetpack Compose",
fontSize = 30.sp,
textAlign = TextAlign.Center,
fontFamily = cusFontFamily
)
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 30.dp, horizontal = 0.dp),
text = "Hello Jetpack Compose",
fontSize = 30.sp,
textAlign = TextAlign.Center,
fontFamily = cusFontFamily2,
fontWeight = FontWeight.Normal
)
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 30.dp, horizontal = 0.dp),
text = "Hello Jetpack Compose",
fontSize = 30.sp,
textAlign = TextAlign.Center,
fontFamily = cusFontFamily2,
fontWeight = FontWeight.Medium,
fontStyle = FontStyle.Italic
)
Text(
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 30.dp, horizontal = 0.dp),
text = "Hello Jetpack Compose",
fontSize = 30.sp,
textAlign = TextAlign.Center,
fontFamily = cusFontFamily2,
fontWeight = FontWeight.Bold
)
}
}
