Kotlin custom fonts

[cwinters8]

Is there a "happy path" method of getting a custom font to apply for the Android app? It's working fine on the Swift side, and at this point I've tried many methods of trying to get it to apply for Android as well, all of which either result in errors or the font simply not being applied. So I figured I'd reach out here to see if there might be any best practices or examples.

I did figure out the naming thing - Android needs font names to be lowercase and underscores, so I do have another copy of the font files in <AppName>/Android/app/src/main/res/font with the correct naming conventions.

The next challenge seems to be just referencing the fonts. String names, e.g. "gerbera_medium", "font/gerbera_medium", "font/gerbera_medium.ttf" etc, don't cause errors but are ineffectual. The Compose docs about fonts refer to using syntax like R.font.gerbera_medium, but using that within a SKIP REPLACE clause like this:

// SKIP REPLACE:
// internal var body = Font.custom(R.font.gerbera_medium)
static var body = Font.custom("Gerbera-Medium", relativeTo: .body)

causes the build error: Unresolved reference: font. I'm betting I need to fully qualify R for that clause but I'm struggling to find the full import path.

[marcprux]

TBH, we haven't yet worked out how we are going to be interacting with the R system, especially when it comes to custom fonts. This is a use case we plan to explore further.

In the meantime, I think you should be able to reference the resource class using the converted class name of your main app package. So if your top-level Swift module name is MyGreatApp, Skip will convert this into the package my.great.app, and you might be able to access the font resource as: my.great.app.R.gerbera_medium.

Please give this a try and let us know is this works or not.

[cwinters8]

No dice, unfortunately. This syntax

// SKIP REPLACE:
// internal var body = Font.custom(hoof.hub.R.font.gerbera_medium)
static var body = Font.custom("Gerbera-Medium", relativeTo: .body)

Leads to the same Unresolved reference: font error.

Just to make sure I'm not making incorrect assumptions: the top-level module name should be the same as the app name right? So if I have an app like this

then the top-level module name would be converted to the hoof.hub package?

[aabewhite]

Given that we're kind of fishing here, one thing that might really speed up the experimentation is to open your project in Android Studio:
https://skip.tools/docs/platformcustomization/#android-studio

In Android Studio, you can quickly start trying various things, and you can take advantage of its code completion and inline documentation etc. Once you find a solution, you can figure out how to back-port it to your Xcode project (and we can help).

[cwinters8]

I have the project open in Android Studio and have been experimenting. Using R or hoof.hub.R is no good - it can't find R in either context.

It was able to find hoof.hub.Resources.fonts, which appears to be a directory that contains the fonts I added for iOS. So I duplicated the font files in the Sources/HoofHub/Resources/fonts directory and updated the names to be appropriate for Android, rebuilt, and confirmed the new files are present in the hoof/hub/Resources/fonts directory in Android Studio. However, the fonts still can't be found when I try to refer to them. For example, hoof.hub.Resources.fonts.gerbera_medium results in Unresolved reference: gerbera_medium.

I'm honestly okay letting this go for now if needed; it's certainly not a deal breaker. I can deal with just using the default Android font for now and then making the apps consistent once the support for custom fonts is in place.

[marcprux]

I've implemented custom Font support in SkipUI 0.5.18. Run Xcode's File/Packages/Update to Latest Package Versions to get it, and see the instructions for the project setup at https://skip.tools/docs/modules/skip-ui/#custom-fonts. Adding the embedded fonts to the project requires a few steps for both the iOS and Android side, but it sounds like you already have the iOS side working, so you should be able to just copy the font to the Android/app/src/main/res/font/ folder of your project (creating the directory first if needed) and it might work out of the box.

Please let us know if you have any issues we'll help work through them. You may also want to take a look at the Showcase app's project and TextPlayground.swift view for a working example. Here's a screenshot of how it might look:

[cwinters8]

It works! And an easy implementation path to boot. Brilliantly done!!

Obviously I have some scaling issues to deal with but the font indeed loads properly on both so I'm thrilled

I'm also a bit in shock over how quickly you got that implemented and released tbh. Really great work. 👏