CODEWITHSUNDEEP
kotlinfontscompose-multiplatformcompose-desktopjetbrains-compose
Lawrence Cheng
Lawrence Cheng

Reputation: 3

How do I use fonts in Jetpack Compose for Desktop?

I'm trying to use some font ttf files placed in src/main/resources/fonts/ in JetBrains Compose for Desktop. How do I use the font files in the function androidx.compose.ui.text.font.Font()? I tried using the R.fonts.font_file mentioned in many online articles, but it seems like it only works on Android.

I know that there's this. He's facing the exact same problem I'm having here. I've tried this. Unfortunately, it didn't work. The only answer in the question I linked above says that the solution was to put the font files in src/main/resources and use:

Font(
    resource = "font.ttf",
    weight = FontWeight.W400,
    style = FontStyle.Normal,
)

But it doesn't work. The androidx.compose.ui.text.font.Font() function on my machine requires 3 params, resId, weight, and style.

public fun Font(
    resId: Int,
    weight: FontWeight,
    style: FontStyle,
)

(copied from the Idea tooltip)

As you can see, it requires a resId: Int. How am I supposed to specify it in an Int?

Since JetBrains Compose for Desktop is still in its early beta stage, resources I could find on the web is really scarce. I tried searching for "kotlin resource id" to find the way to refer to the font file as an ID, but all I could find are really Android-targeted things. I also tried searching for "jetpack compose desktop font" and "jetbrains compose font", and the results I get are also flooded with Android things. Yes, I tried using "-android" in the search query, but all that's left in the results are irrelevant. The question I linked is the only thing I could find about Jetpack Compose for Desktop font.

Here's most of my project structure.

Here is the tooltip that IntelliJ Idea shows when I hover over Font(). It isn't that useful, is it?

Kotlin version: 1.5.10
Jetpack compose version: 0.5.0-build225 (latest pre-release) By the way, I'm using Manjaro Linux on a MacBook if it matters.

Upvotes: 0

Views: 2639

Answers (3)

Mahozad
Mahozad

Reputation: 24712

With CMP 1.7.0 do the following:

  1. Add resources library: implementation(compose.components.resources)
  2. Place the .ttf or .otf font files in src/commonMain/composeResources/font/
  3. Access the font with Res.font.font_name
    For example: val myFont = Font(Res.font.roboto)

For more details, see the documentations.

Upvotes: 0

simon5678
simon5678

Reputation: 259

This is how I use "jost_regular.ttf".

  1. Put jost_regular.ttf in jvmMain/resources/font/ folder.
  2. In Theme.kt:
package jetbrains.compose.calculator.resources

import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.platform.Font

...

val jostFontFamily = FontFamily(
    fonts = listOf(
        Font(
            resource = "font/jost_regular.ttf",
            weight = FontWeight.W400,
            style = FontStyle.Normal
        )
    )
)
  1. Usage:
    Text(
        text = mainOutput.value .text,
        style = TextStyle(
            fontSize = 48.sp,
            fontFamily = jetbrains.compose.calculator.resources.jostFontFamily
        ),
        overflow = TextOverflow.Ellipsis,
        softWrap = false,
        maxLines = 1,
    )

Upvotes: 2

Alex Walker
Alex Walker

Reputation: 2356

You can't use androidx.compose.ui.text.font.Font for this. Import androidx.compose.ui.text.platform.Font instead.

Perhaps counter-intuitively, androidx.compose.ui.text.platform.Font is a valid parameter type in a androidx.compose.ui.text.font.FontFamily, and supports resource, weight and style.

Upvotes: 4

Related Questions