このページは Cloud Translation API によって翻訳されました。

フォントを操作する

このページでは、Compose アプリでフォントを設定する方法について説明します。

フォントを設定

Text には、コンポーザブルで使用されるフォントを設定するための fontFamily パラメータを指定できます。デフォルトでは、Serif、Sans Serif、Monospace、Cursive のフォントファミリーが含まれています。

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

fontFamily 属性を使用すると、res/font フォルダで定義されているカスタムフォントと書体を操作できます。

開発環境の res > font フォルダの図

次の例は、これらのフォントファイルに基づいて Font 関数を使用して fontFamily を定義する方法を示しています。

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

この 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)
}TextSnippets.kt

アプリ全体でタイポグラフィを設定する方法については、Compose のカスタムデザインシステムをご覧ください。

ダウンロード可能なフォント

Compose 1.2.0 以降では、Compose アプリでダウンロード可能なフォント API を使用して、Google フォントを非同期でダウンロードしてアプリで使用できます。

カスタムプロバイダが提供するダウンロード可能フォントは現在サポートされていません。

プログラムでダウンロード可能なフォントを使用する

アプリ内からプログラムでフォントをダウンロードする手順は次のとおりです。

依存関係を追加します。

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")
}

Google Fonts の認証情報で 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
)TextDownloadableFontsSnippets.kt
```
プロバイダが受け取るパラメータは次のとおりです。
- Google Fonts のフォントプロバイダの権限
- プロバイダの ID を確認するためのフォントプロバイダパッケージ
- プロバイダの ID を確認するための、証明書のハッシュセットのリストGoogle Fonts プロバイダに必要なハッシュは、Jetchat サンプルアプリの font_certs.xml ファイルで確認できます。

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

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
    )
)TextDownloadableFontsSnippets.kt

コンポーズ可能な Text 関数で使用する FontFamily を構成します。

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

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

次に、タイポグラフィをアプリのテーマに設定します。

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

ダウンロード可能なフォントを Material3 とともに Compose で実装するアプリの例については、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)
)TextDownloadableFontsSnippets.kt

両方のウェイトのデフォルトフォントを次のように定義できます。

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

正しいインポートを追加していることを確認してください。

このように FontFamily を定義すると、2 つのチェーン（ウェイトごとに 1 つ）を含む FontFamily が作成されます。読み込みメカニズムでは、まずオンラインフォントを解決し、次にローカルの R.font リソースフォルダにあるフォントを解決しようとします。

実装をデバッグする

フォントが正しくダウンロードされていることを確認するには、デバッグコルーチンハンドラを定義します。ハンドルを使用すると、フォントが非同期でロードされなかった場合に実行する動作を指定できます。

まず、CoroutineExceptionHandler を作成します。

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

これを createFontFamilyResolver メソッドに渡して、リゾルバが新しいハンドラを使用するようにします。

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

プロバイダの isAvailableOnDevice API を使用して、プロバイダが利用可能であり、証明書が正しく構成されているかどうかをテストすることもできます。そのためには、プロバイダが正しく構成されていない場合は false を返す isAvailableOnDevice メソッドを呼び出します。

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

注意点

Google Fonts では、Android で新しいフォントを利用できるようになるまでに数か月かかります。フォントが fonts.google.com に追加されてから、ダウンロード可能なフォント API（View システムまたは Compose）を介して利用可能になるまでに時間差があります。新しく追加したフォントが IllegalStateException でアプリで読み込めない場合があります。デベロッパーがこのエラーを他の種類のフォント読み込みエラーから識別できるように、Compose の例外に関する説明メッセージをこちらに変更に追加しました。問題が見つかった場合は、Issue Tracker を使用して報告します。

可変フォントを使用する

可変フォントは、1 つのフォントファイルに異なるスタイルを含めることができるフォント形式です。可変フォントを使用すると、軸（またはパラメータ）を変更してお好みのスタイルを生成できます。これらの軸は、太さ、幅、傾斜、斜体などの標準、またはカスタムにすることができ、可変フォントによって異なります。

軸の値が異なる同じ変数フォントを 5 つ構成しています。 — **図 1.** 異なる軸の値でカスタマイズした同じ可変フォントを使用したテキスト。

通常のフォントファイルの代わりに可変フォントを使用すると、フォントファイルを複数ではなく 1 つだけにできます。

可変フォントについて詳しくは、Google Fonts Knowledge、使用可能な可変フォントのカタログ全体、各フォントでサポートされている軸の表をご覧ください。

このドキュメントでは、Compose アプリに可変フォントを実装する方法について説明します。

可変フォントを読み込む

使用する変数フォント（Roboto Flex など）をダウンロードして、アプリの app/res/font フォルダに配置します。追加する ttf ファイルは、フォントの可変フォントバージョンであり、フォントファイルの名前はすべて小文字で、特殊文字は含まれていません。

注: 現在、ダウンロード可能フォントで可変フォントはサポートされていません。最新情報については、こちらのバグをご覧ください。
可変フォントを読み込むには、res/font/ ディレクトリに配置されたフォントを使用して FontFamily を定義します。
```
// 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
```
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
}VariableFontsSnippets.kt

設定を定数セットに抽出して再利用しやすくし、フォント設定を次の定数に置き換えます。

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

FontFamily を使用するようにマテリアルデザイン 3 のタイポグラフィを構成します。
```
// Type.kt
val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = displayLargeFontFamily,
        fontSize = 50.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp,
        /***/
    )
)VariableFontsSnippets.kt
```
このサンプルでは、displayLarge マテリアル 3 タイポグラフィを使用します。デフォルトのフォント設定と推奨される使用方法が異なります。たとえば、短くクリティカルなテキストは画面上で最も大きいテキストであるため、displayLarge を使用する必要があります。

マテリアル 3 では、TextStyle と fontFamily のデフォルト値を変更して、タイポグラフィをカスタマイズできます。上記のスニペットでは、TextStyle のインスタンスを構成して、フォントファミリーごとにフォント設定をカスタマイズします。

タイポグラフィを定義したので、それを M3 MaterialTheme に渡します。

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

最後に、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
                )
            }
        }
    }
}VariableFontsSnippets.kt

各 Text コンポーザブルは、マテリアルテーマのスタイルで構成され、異なる可変フォント構成を含んでいます。MaterialTheme.typography を使用すると、M3 MaterialTheme コンポーザブルに提供されたタイポグラフィを取得できます。

3 種類のテキストがそれぞれ異なるフォント設定を示している。 — **図 2.** 3 つの異なる構成で適用される可変フォント

カスタム軸を使用する

フォントにカスタム軸を設定することもできます。フォントファイル内で定義します。たとえば、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())
}VariableFontsSnippets.kt
```
これらの関数は、次の処理を行います。
- 受け入れ可能な値にガードレールを定義します。可変フォントカタログからわかるように、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
}VariableFontsSnippets.kt

小文字のアセンダーの高さが広くなり、他のテキストの幅は広くなっています。

カスタム軸が設定され、可変フォントの設定が異なる 3 つのテキスト。一部は小文字のアセンダーが高く、以前よりも幅が広い。 — **図 3.**可変フォントに設定されたカスタム軸を示すテキスト。

参考情報

詳しくは、可変フォントに関する次のブログ投稿をご覧ください。

タイプのみ: Compose の可変フォント

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose のリソース
テキストのスタイルを設定する
Compose のマテリアルデザイン 2