このページは 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 Fonts を非同期でダウンロードし、アプリで使用できます。

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

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

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

依存関係を追加します。

GroovyKotlin

dependencies {
    ...
    implementation "androidx.compose.ui:ui-text-google-fonts:1.7.8"
}

dependencies {
    ...
    implementation("androidx.compose.ui:ui-text-google-fonts:1.7.8")
}

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
```
プロバイダが受け取るパラメータは次のとおりです。 <ph type="x-smartling-placeholder">
- 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

フォントの他のパラメータをクエリすることもできます。たとえば、weight と style には 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(
    bodyMedium = TextStyle(
        fontFamily = fontFamily, fontWeight = FontWeight.Normal, fontSize = 12.sp/*...*/
    ),
    bodyLarge = TextStyle(
        fontFamily = fontFamily,
        fontWeight = FontWeight.Bold,
        letterSpacing = 2.sp,
        /*...*/
    ),
    headlineMedium = 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 フォントに関する知識、利用可能な可変フォントのカタログ全体、各フォントでサポートされている軸の表をご覧ください。

このドキュメントでは、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.**可変フォントに設定されたカスタム軸を示すテキスト。

参考情報

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

Just your type: Compose の可変フォント

現在、おすすめはありません。

Google アカウントにログインしてください。