Do you know how to import custom font for iOS Mult...
# compose-ios
r
Do you know how to import custom font for iOS Multiplatform?
Copy code
val rubikFamily = FontFamily(
    fonts = listOf(
        Font(
            resId = "font/rubik_italic.ttf", // Need R.
            weight = FontWeight.W400,
        )
    )
)
a
It's interesting... if I recall correctly, there was a thread someone has done on this, but it might be better now
a
is this one?
a
That's the one 😅
a
Not using the jet brains compose resources?
j
r
@Joel Denke Unfortunately
defaultFontFamily
is not visible for material3 (material only) 😞
j
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 😛
u
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…
j
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 🙂
r
Got this weird issue with Moko 🤔
u
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
r
Indeed, I'm using Compose Multiplatform 👍 And trying to embed that in a material3.MaterialTheme typography
j
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 🙂
u
@Renaud I just tested it like this:
Copy code
@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.
r
Yes @Uli Niggemann, this way it works like a charm, thank you!!
I'm now struggling with iOS side as my build is failing but probably not related 😅
u
Compile or runtime?
r
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
I could put the resource back but I prefer to understand how this is generated under the hood at the moment 🙂
u
Maybe it (compose-multiplatform) is it still used in the code?
j
Hehe Yeah that @Uli Niggemann I tried explain. Nice with code sample! :)
331 Views