Do you know how to import custom font for iOS Multiplatform?

val rubikFamily = FontFamily(
    fonts = listOf(
        Font(
            resId = "font/rubik_italic.ttf", // Need R.
            weight = FontWeight.W400,
        )
    )
)

It's interesting... if I recall correctly, there was a thread someone has done on this, but it might be better now

is this one?

That's the one 😅

Not using the jet brains compose resources?

I think this one explains really good, https://www.netguru.com/blog/kotlin-multiplatform-resources

@Joel Denke Unfortunately

defaultFontFamily

is not visible for material3 (material only) 😞

Yeah I think Google working on it for M3. Also isnt it kind a similar of using LocalTextStyle assigned default TextStyle? Or when exactly need defaultFontFamily? I have never been in need of it 😛

I just had a look at https://github.com/icerockdev/moko-resources ( --> #moko) which looks very handy on the first glance. As coming from iOS I especially like the @xx.png notation as we will be able to easily automate figma-exports for multiple platforms…

The main problem at moment need to use Cocoapods things for loading resources, which mostly being complicated if having multiple cocoapods with nested dependecy graph between modules. In Gradle/JVM world it works ok, but iOS linking process is far from ideal in this sense. At moment I am only using one shared module for resources to get around this issue. But using multiple resource folders doesnt seem to really work well. Regardless if fonts or anything else 🙂

Got this weird issue with Moko 🤔

you are using the compose helper “fontFamilyResource”, this works only in compose views. But you might be able to access it directly like here https://github.com/icerockdev/moko-resources/tree/master#example-8---pass-font

Indeed, I'm using Compose Multiplatform 👍 And trying to embed that in a material3.MaterialTheme typography

Right, I am into the same thoughts and stuff as you then with typography in custom design system. One alternative way of doing it is declare the font name only and using location of font resources later on instead. Also what could do @Renaud is that you inject Typography with LocalTypography in runtime inside Compose theme wrapper. You load the fonts inside it. Similar approach as with LocalFontLoader for Google downloadable fonts. It will assign default typography like one second and then recompose with new typography once loaded 🙂

@Renaud I just tested it like this:

@Composable
fun CustomMaterialTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColors
    } else {
        LightColors
    }

    MaterialTheme(
        colorScheme = colors.copy(
            primary = colorResource(MR.colors.sdBaseButtonFirstActiveBackground),
            onPrimary = LightColors.onPrimary
        ),
        typography = typography.copy(
            headlineMedium = TextStyle.Default.copy(fontFamily = fontFamilyResource(MR.fonts.cormorant.italic), fontSize = 30.em)
        ),
        shapes = shapes,
        content = content
    )
}

This updates the primary-color and the headline-font with some MR-Resources… I am not sure if we could use it this way, but at least it works for ios & android, which is kinda cool.

Yes @Uli Niggemann, this way it works like a charm, thank you!!

Compile or runtime?

My error is that since I migrated from

@OptIn(ExperimentalResourceApi::class)

to Moko, I have removed

commonMain/resources/compose-multiplatform.xml

and delete the dependency and now iOS (and CocoaPods) is complaining that the resources does not exist anymore

Maybe it (compose-multiplatform) is it still used in the code?

Hehe Yeah that @Uli Niggemann I tried explain. Nice with code sample! :)