Adding Custom Fonts in Kotlin/Compose Multiplatform: A Complete Guide

When building apps using Kotlin/Compose Multiplatform, customizing the look and feel of your app is important to create a unique user experience. One way to enhance your app's design is by integrating custom fonts! Whether you're targeting Android, iOS, or desktop, this guide will walk you through adding custom fonts to your Compose Multiplatform project. 🎨✨

Why Use Custom Fonts?

Custom fonts add personality to your app, making it stand out. They can match your brand's style or improve readability. Let's see how you can easily integrate custom fonts using Kotlin/Compose Multiplatform.

Step-by-Step Guide to Add Custom Fonts

1. Download Fonts 🎨

Start by downloading your desired fonts from Google Fonts. Choose fonts that match your app’s style and aesthetic.

2. Create the font Folder Inside composeResources 📁

Navigate to your project’s commonMain source set:

• Go to commonMain/composeResources.
• Create a new folder named font.
  
  
  

3. Add Your Font File 📄

Place the downloaded font file (e.g., Montserrat.ttf) into the newly created font folder:

• Path should look like: commonMain/composeResources/font/Montserrat.ttf.

Make sure to sync the project, once placed the font in the folder.

4. Create Font.kt in the Theme Folder 📝

Navigate to your commonMain source set’s theme folder and create a file called Font.kt. Add the following code:

    
@Composable
fun MontTypography() = Typography().run {

    val fontFamily = MontFontFamily()
    copy(
        displayLarge = displayLarge.copy(fontFamily = fontFamily),
        displayMedium = displayMedium.copy(fontFamily = fontFamily),
        displaySmall = displaySmall.copy(fontFamily = fontFamily),
        headlineLarge = headlineLarge.copy(fontFamily = fontFamily),
        headlineMedium = headlineMedium.copy(fontFamily = fontFamily),
        headlineSmall = headlineSmall.copy(fontFamily = fontFamily),
        titleLarge = titleLarge.copy(fontFamily = fontFamily),
        titleMedium = titleMedium.copy(fontFamily = fontFamily),
        titleSmall = titleSmall.copy(fontFamily = fontFamily),
        bodyLarge = bodyLarge.copy(fontFamily =  fontFamily),
        bodyMedium = bodyMedium.copy(fontFamily = fontFamily),
        bodySmall = bodySmall.copy(fontFamily = fontFamily),
        labelLarge = labelLarge.copy(fontFamily = fontFamily),
        labelMedium = labelMedium.copy(fontFamily = fontFamily),
        labelSmall = labelSmall.copy(fontFamily = fontFamily)
    )
}
    
  

5. Create Typography in Font.kt to use it in themes.

In your Font.kt file, you’ll want to define a custom typography using your Montserrat font. Here’s how you can do it:

    
@Composable
fun MontFontFamily() = FontFamily(
  Font(Res.font.Montserrat, weight = FontWeight.Light),
  Font(Res.font.Montserrat, weight = FontWeight.Normal),
  Font(Res.font.Montserrat, weight = FontWeight.Medium),
  Font(Res.font.Montserrat, weight = FontWeight.SemiBold),
  Font(Res.font.Montserrat, weight = FontWeight.Bold)
)
    
  

6. Using Your Custom Typography in Theme.

Once you've defined the custom typography, you can integrate it into your theme setup like this:

7. (Optional) Using Custom Font only in Some of our UI 🎨

If you prefer to apply the custom font only to specific Text views instead of setting it globally in the theme, you can directly use the fontFamily property in the TextStyle, like in the example shown. This gives you flexibility in customizing individual text components without affecting the entire app. 🎨✨

Why Use Custom Fonts? 🤔

Custom fonts are a great way to:

• Brand your app: Give it a unique personality that aligns with your design language.
• Enhance readability: Choose fonts that fit your target audience.
• Make a statement: Use fonts to set the tone, whether it’s playful, formal, or modern.

Conclusion 🎯

Adding custom fonts like Montserrat to your Compose/Kotlin Multiplatform project is an effective way to make your app stand out. By following the simple steps outlined above, you can seamlessly integrate any font you want, ensuring a consistent and professional design across platforms. Now it’s time to experiment and make your app truly unique! 🌟

Stay Connected:🚀

Stay connected on LinkedIn — for the latest updates. Let’s continue shaping the future of tech together. Happy coding!