このページは 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 フォルダの図

この例では、これらのフォントに基づいて 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)
)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.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
)TextDownloadableFontsSnippets.kt
```
プロバイダが受け取るパラメータは次のとおりです。
- 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)
)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

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

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

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 で）新規追加されたフォントが、特定の Google ブラウザや IllegalStateException。デベロッパーがこのエラーを他の種類のフォント読み込みエラーと区別できるように、 Compose に例外の説明メッセージを追加し、変更を行いましたこちらをご覧ください。問題が見つかった場合は、問題番号を使用して報告します。

可変フォントを使用する

バリアブルフォントとは、1 つのフォントファイルにさまざまなフォントを含めることができるフォント形式です。あります。可変フォントを使用すると、軸（またはパラメータ）を変更してお好みのスタイルに変更できます。これらの軸には、重量、幅、傾斜、カスタムフォントを使用できます。

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

通常のフォントファイルの代わりに可変フォントを使用すると、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),
            )
        )
    )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