Do you know how to import custom font for iOS Mult...

# compose-ios

[Renaud]

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,
        )
    )
)

[andrew]

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

[Alejandro Rios]

is this one?

[andrew]

That's the one 😅

[agrosner]

Not using the jet brains compose resources?

[Joel Denke]

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

[Renaud]

@Joel Denke Unfortunately defaultFontFamily is not visible for material3 (material only) 😞

[Joel Denke]

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 😛

[Uli Niggemann]

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…

[Joel Denke]

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 🙂

[Renaud]

Got this weird issue with Moko 🤔

[Uli Niggemann]

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

[Renaud]

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

[Joel Denke]

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 🙂

[Uli Niggemann]

@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.

[Renaud]

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

[Renaud]

I'm now struggling with iOS side as my build is failing but probably not related 😅

[Uli Niggemann]

Compile or runtime?

[Renaud]

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

[Renaud]

I could put the resource back but I prefer to understand how this is generated under the hood at the moment 🙂

[Uli Niggemann]

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

[Joel Denke]

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