フォントを操作する

このページでは、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 フォルダで定義されているカスタムのフォントと書体を操作できます。

次の例は、これらのフォント ファイルに基づき、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 を非同期でダウンロードし、アプリで使用できます。

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

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

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

1. 依存関係を追加します。

   Groovy

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

   Kotlin

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

2. 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 ファイルで確認できます。
3. 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

4. コンポーズ可能な 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（ビューシステムまたは Compose）で利用できるようになるまでに時間的なずれがあります。新たに追加されたフォントが、IllegalStateException でアプリに読み込めない場合があります。デベロッパーがこのエラーと他の種類のフォント読み込みエラーを見分けることができるよう、Compose に例外についての説明メッセージを追加しました。変更内容については、こちらをご覧ください。問題が見つかった場合は、Issue Tracker を使用して報告してください。

可変フォントを使用する

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

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

可変フォントに関する背景情報については、Google Fonts の知識、利用可能な可変フォントのカタログ全体、各フォントでサポートされている軸の表をご覧ください。

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

可変フォントを読み込む

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

2. 可変フォント ファイルを読み込むには、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 を使用すると、太さ、幅、傾斜などの標準フォント軸を構成できます。これらは、どの可変フォントでも使用できる標準の軸です。フォントを使用する場所に応じて、さまざまなフォント構成を作成できます。

3. 可変フォントは 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

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

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

5. 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 のインスタンスを構成して、各フォント ファミリーのフォント設定をカスタマイズしています。

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

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

7. 最後に、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 コンポーザブルに提供されているタイポグラフィを取得できます。

カスタム軸を使用する

フォントにはカスタム軸を設定することもできます。これらはフォント ファイル自体で定義されます。たとえば、Roboto Flex フォントには、小文字のアクセント記号の高さを調整するアクセント記号の高さ（"YTAS"）軸と、各文字の幅を調整するカウンタ幅（"XTRA"）軸があります。

これらの軸の値は、FontVariation 設定で変更できます。

フォント用に構成できるカスタム軸の詳細については、各フォントのサポートされている軸の表をご覧ください。

1. カスタム軸を使用するには、カスタム 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）がハードコードされ、値がパラメータとして使用されます。

2. フォント構成の軸を使用して、読み込まれる各 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

   小文字のアクセント記号の高さが上がり、他のテキストの幅が広がっています。

参考情報

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

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

あなたへのおすすめ

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