Hi How do I provide TextStyles with custom fonts in compose kotlinlang #compose-ios

Join Slack

Hi. How do I provide TextStyles with custom fonts ...

# compose-ios

Giorgi

12/16/2024, 1:03 PM

Hi. How do I provide TextStyles with custom fonts in compose multiplatform?

Giorgi

12/16/2024, 1:04 PM

Currently I have this

Copy code

package com.myapp.app.presentation.theme

import androidx.compose.runtime.Composable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.sp
import myapp.composeapp.generated.resources.Inter_VariableFont
import myapp.composeapp.generated.resources.Res
import org.jetbrains.compose.resources.Font

val LocalCCTypography = staticCompositionLocalOf {
    object : CCTypography {} as CCTypography
}

private val lineHeightStyle = LineHeightStyle(
    LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None
)

interface CCTypography {
    val h1: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 24.sp,
            lineHeight = 36.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        )

    val h2: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 20.sp,
            lineHeight = 32.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        )

    val h3: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 16.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        )

    val h4: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        )

    val h5: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        )

    val h6: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 16.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        )

    val h7: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 16.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        )

    val body1: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        )

    val body2: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        )

    val body3: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        )

    val body4: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        )

    val caption1: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 11.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        )

    val caption2: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 11.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        )

    val tiny1: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 10.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        )

    val tiny2: TextStyle
        @Composable get() = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 10.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        )
}

Giorgi

12/16/2024, 1:05 PM

I just realised that TextStyle will be recreated every time those styles are referenced will. Also font will loadd once more and most likely will cause performance issues

Giorgi

12/16/2024, 1:06 PM

have not measured yet how bad it is but anyway how would you do it?

Giorgi

12/16/2024, 1:07 PM

in common main Font() is composable function so it is not possible to directly provide it...

Giorgi

12/18/2024, 9:57 AM

I came up with something like this

Giorgi

12/18/2024, 9:57 AM

Copy code

import androidx.compose.runtime.Composable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.Font

val LocalCCTypography = staticCompositionLocalOf<CCTypography?> { null }

data class CCTypography(
    val h1: TextStyle,
    val h2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,
    val h6: TextStyle,
    val h7: TextStyle,
    val body1: TextStyle,
    val body2: TextStyle,
    val body3: TextStyle,
    val body4: TextStyle,
    val caption1: TextStyle,
    val caption2: TextStyle,
    val tiny1: TextStyle,
    val tiny2: TextStyle
)

private val lineHeightStyle = LineHeightStyle(
    LineHeightStyle.Alignment.Center, trim = LineHeightStyle.Trim.None
)

@Composable
fun createCCTypography(): CCTypography {
    return CCTypography(
        h1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 24.sp,
            lineHeight = 36.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 20.sp,
            lineHeight = 32.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h3 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 16.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h4 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W900
        ),
        h5 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        ),
        h6 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 16.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        ),
        h7 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 16.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W800
        ),
        body1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        body2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 14.sp,
            lineHeight = 26.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        ),
        body3 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        body4 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 12.sp,
            lineHeight = 20.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        ),
        caption1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 11.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        caption2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 11.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        ),
        tiny1 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 10.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W700
        ),
        tiny2 = TextStyle(
            fontFamily = FontFamily(Font(Res.font.Inter_VariableFont)),
            fontSize = 10.sp,
            lineHeight = 12.sp,
            lineHeightStyle = lineHeightStyle,
            fontWeight = FontWeight.W500
        )
    )
}

Giorgi

12/18/2024, 9:58 AM

and in theme files

Copy code

@Composable
fun CatchClickerTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colorScheme = if (isSystemInDarkTheme()) DarkColorScheme else LightColorScheme,
    ) {
        CompositionLocalProvider(
            LocalCCColors provides if (isSystemInDarkTheme()) darkCCColors() else lightCCColors(),
            LocalCCTypography provides createCCTypography()
        ) {
            content()
        }
    }
}

Giorgi

12/18/2024, 9:58 AM

now the issue is that LocalCCTypography is nullable

Giorgi

12/18/2024, 10:00 AM

so I made a wrapper object and used !!

Copy code

object CCTheme {
    val typography: CCTypography
        @Composable
        @ReadOnlyComposable
        get() = LocalCCTypography.current!!
}

Usage in composables

Copy code

Text(
                "Enter code",
                style = CCTheme.typography.h2
            )

9 Views

Open in Slack

Previous Next