このページでは、Compose アプリでフォントを設定する方法について説明します。
フォントを設定
Text
には、コンポーザブルで使用されるフォントを設定するための fontFamily
パラメータを指定できます。デフォルトでは、Serif、Sans Serif、Monospace、Cursive のフォント ファミリーが含まれています。
@Composable fun DifferentFonts() { Column { Text("Hello World", fontFamily = FontFamily.Serif) Text("Hello World", fontFamily = FontFamily.SansSerif) } }
fontFamily
属性を使用すると、カスタム フォントと書体を使用できます
res/font
フォルダに定義されています。
この例では、これらのフォントに基づいて fontFamily
を定義する方法を示します。
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) )
この fontFamily
を Text
コンポーザブルに渡すことができます。なぜなら、
fontFamily
にはさまざまな重みを含めることができます。また、fontWeight
を手動で次の値に設定できます。
テキストの適切な太さを選択:
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) }
アプリ全体でタイポグラフィを設定する方法については、Compose のカスタム デザイン システムをご覧ください。
ダウンロード可能なフォント
Compose で開始する 1.2.0、 Compose アプリでダウンロード可能なフォントの API を使用して、Google 非同期に作成して、アプリで使用することもできます。
現在、カスタム プロバイダが提供するダウンロード可能フォントはサポートされていません。
プログラムでダウンロード可能なフォントを使用する
アプリ内からプログラムでフォントをダウンロードする手順は次のとおりです。
- 依存関係を追加します。
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") }
- 初期化
GoogleFont.Provider
次のコマンドを入力します。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 Fonts のフォント プロバイダの権限
- プロバイダの ID を確認するためのフォント プロバイダ パッケージ
- プロバイダの ID を確認するための、証明書のハッシュセットのリストGoogle Fonts プロバイダが必要とするハッシュは、
font_certs.xml
ファイル Jetchat サンプルアプリ。
- 目標を
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) )
太さやスタイルなど、フォントの他のパラメータをクエリするには、FontWeight
、FontStyle
それぞれ:// ... 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 ) )
FontFamily
を次のように構成します。 使用する方法を見てみましょう。
Text( fontFamily = fontFamily, text = "Hello World!" )
![](https://developer.android.com/static/develop/ui/compose/images/text-dl-fontfamily.png?authuser=8&hl=ja)
「新規顧客の獲得」目標を
使用するタイポグラフィ
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/*...*/ ), /*...*/ )
次に、タイポグラフィをアプリのテーマに設定します。
MyAppTheme( typography = MyTypography )/*...*/
Compose でダウンロード可能なフォントを実装するアプリの例 マテリアル 3 のほか、 Jetchat サンプルアプリをご覧ください。
代替フォントを追加する
フォントがうまく機能しない場合に備えて、フォントの代替の連鎖を決定できます。 適切にダウンロードされます。たとえば、ダウンロード可能フォントが定義済みで、 例:
// ... 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) )
両方のウェイトのデフォルト フォントを次のように定義できます。
// ... 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) )
正しいインポートを追加していることを確認してください。
このように FontFamily
を定義すると、2 つのチェーン(ウェイトごとに 1 つ)を含む FontFamily
が作成されます。読み込みメカニズムではまずオンライン フォントを解決しようとしますが、
次に、ローカルの R.font
リソース フォルダにあるフォントを選択します。
実装をデバッグする
フォントが正しくダウンロードされていることを確認するには、デバッグ コルーチン ハンドラを定義します。ハンドルを使用すると、フォントが非同期でロードされなかった場合に実行する動作を指定できます。
まずは
CoroutineExceptionHandler
:
val handler = CoroutineExceptionHandler { _, throwable -> // process the Throwable Log.e(TAG, "There has been an issue: ", throwable) }
それを
createFontFamilyResolver
メソッドを使用して、リゾルバが新しいハンドラを使用するようにします。
CompositionLocalProvider( LocalFontFamilyResolver provides createFontFamilyResolver(LocalContext.current, handler) ) { Column { Text( text = "Hello World!", style = MaterialTheme.typography.bodyMedium ) } }
プロバイダの isAvailableOnDevice
API を使用して、プロバイダが利用可能であり、証明書が正しく構成されているかどうかをテストすることもできます。そのためには、isAvailableOnDevice
メソッドを呼び出します。
プロバイダが正しく構成されていない場合は false を返します。
val context = LocalContext.current LaunchedEffect(Unit) { if (provider.isAvailableOnDevice(context)) { Log.d(TAG, "Success!") } }
注意点
Google Fonts では、Android で新しいフォントを利用できるようになるまでに数か月かかります。フォントを追加するタイミングには時間差があります。
fonts.google.com を通じて
ダウンロード可能なフォントの API(View システムまたは Compose で)新規
追加されたフォントが、特定の Google ブラウザや
IllegalStateException
。
デベロッパーがこのエラーを他の種類のフォント読み込みエラーと区別できるように、
Compose に例外の説明メッセージを追加し、変更を行いました
こちらをご覧ください。
問題が見つかった場合は、問題番号を使用して報告します
。
可変フォントを使用する
バリアブル フォントとは、1 つのフォント ファイルにさまざまなフォントを含めることができるフォント形式です。 あります。可変フォントを使用すると、軸(またはパラメータ)を変更して お好みのスタイルに変更できます。これらの軸には、重量、幅、傾斜、 カスタム フォントを使用できます。
![同じ変数フォントで軸の値が異なる 5 つの構成。](https://developer.android.com/static/develop/ui/compose/images/text/vf-configs.png?authuser=8&hl=ja)
通常のフォント ファイルの代わりに可変フォントを使用すると、1 つのフォントのみを使用できます。 フォント ファイルを作成します。
可変フォントの背景について詳しくは、Google Fonts Knowledge、Google Cloud で利用できるカタログ全体 可変フォント、各フォントでサポートされている軸の表 あります。
このドキュメントでは、Compose アプリに可変フォントを実装する方法について説明します。
可変フォントを読み込む
使用する可変フォント(Roboto Flex など)をダウンロードします。 アプリの
app/res/font
フォルダに配置します。.ttf
追加するファイルはフォントの可変フォント バージョンであり、 フォント ファイルがすべて小文字で、特殊文字が含まれていない。可変フォントを読み込むには、
FontFamily
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), ) ) )
FontVariation
API を使用すると、次のような標準フォント軸を設定できます。 重量、幅、傾斜。これらは標準軸であり すべての可変フォントで使用できますアプリケーションに対してさまざまな構成を作成でき、 使用するフォントのサイズを指定します。可変フォントは Android バージョン O 以降でのみ使用できるため、 適切なフォールバックを構成します。
// 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 }
設定を定数に抽出して再利用しやすくし、 次の定数を使用してフォント設定を作成します。
// 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 }
FontFamily
を使用するようにマテリアル デザイン 3 のタイポグラフィを設定します。// Type.kt val Typography = Typography( displayLarge = TextStyle( fontFamily = displayLargeFontFamily, fontSize = 50.sp, lineHeight = 64.sp, letterSpacing = 0.sp, /***/ ) )
このサンプルでは、
displayLarge
マテリアル 3 タイポグラフィを使用します。 推奨される使い方を紹介します。たとえば、displayLarge
: 画面上の最大のテキストであるため、重要なテキストの場合は短くなります。マテリアル 3 では、
TextStyle
とfontFamily
: タイポグラフィをカスタマイズします。上記のスニペットでは、サービス アカウントをTextStyle
のインスタンスを使用して、各フォント ファミリーのフォント設定をカスタマイズします。タイポグラフィを定義したので、それを M3
MaterialTheme
に渡します。MaterialTheme( colorScheme = MaterialTheme.colorScheme, typography = Typography, content = content )
最後に、
Text
コンポーザブルを使用して、スタイルを定義済みの タイポグラフィ スタイル、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 ) } } } }
各
Text
コンポーザブルは、マテリアル テーマのスタイルと 異なる可変フォント設定が含まれています。次を使用:MaterialTheme.typography
: M3 に提供されたタイポグラフィを取得します。MaterialTheme
コンポーザブル。
![異なるフォント構成を示す 3 つの異なるテキスト。](https://developer.android.com/static/develop/ui/compose/images/text/vf-standard-axes.png?authuser=8&hl=ja)
カスタム軸を使用する
フォントにカスタム軸を設定することもできます。これらはフォント ファイル内で定義します。
たとえば、Roboto Flex フォントにはアセンダー高さ("YTAS"
)軸があり、
小文字のアセンダーの高さを調整します。カウンタの幅("XTRA"
)
各文字の幅を調整します。
これらの軸の値は FontVariation
設定で変更できます。
フォントに設定できるカスタム軸について詳しくは、 各フォントのサポートされている軸の表をご覧ください。
カスタム軸を使用するには、カスタム
ascenderHeight
の関数を定義します。counterWidth
軸: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()) }
これらの関数は次の処理を行います。
- 受け入れ可能な値のガードレールを定義します。ご覧のとおり、
可変フォント カタログ:
ascenderHeight (YTAS)
には 最小値は649f
、最大値は854f
です。 - フォントの設定を返して、フォントに追加する準備を整えます。イン
FontVariation.Setting()
メソッドの場合、軸名(YTAS, XTRA
)は 値をパラメータとして受け取ります。
- 受け入れ可能な値のガードレールを定義します。ご覧のとおり、
可変フォント カタログ:
フォント設定で軸を使用して、追加のパラメータを 読み込まれる各
Font
:@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 }
小文字のアセンダーの高さが高くなり、 次のテキストの方が横長です:
![カスタム軸を設定して、可変フォントの構成が異なる 3 つのテキスト。一部のテキストは小文字のアセンダーが高く、以前よりも幅が広くなっています。](https://developer.android.com/static/develop/ui/compose/images/text/vf-custom-axes.png?authuser=8&hl=ja)
参考情報
詳細については、可変フォントに関する次のブログ投稿をご覧ください。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose のリソース
- テキストのスタイルを設定する
- Compose のマテリアル デザイン 2