System fonts such as ".SFUI-Semibold" are not applied on iOS

[ewerspej]

Description

In Xamarin.Forms it is possible to use platform-specific system fonts, such as sans-serif-medium on Android and .SFUI-Semibold on iOS, without having to import them manually.

Now, using the .SFUI-Semibold font fails on iOS, it defaults to Times New Roman, which is the expected behavior for fonts that are unknown on iOS, AFAIK.

The code used for Xamarin.Forms and MAUI is the same and looks like this:

<Grid>
    <Label
        VerticalOptions="Center"
        HorizontalOptions="Center"
        VerticalTextAlignment="Center"
        HorizontalTextAlignment="Center"
        FontSize="Title"
        FontFamily="{OnPlatform iOS='.SFUI-Semibold'}"
        Text="This should be SFUI-Semibold!"/>
</Grid>

Side-by-side comparison of Xamarin.Forms (correct, left) and .NET MAUI (incorrect, right):

I've also tried removing the "." in front of the font name. When I do that, it doesn't default to Times New Roman, but instead a different font (or font style) is used.

Steps to Reproduce

1. Create a new MAUI app
2. Replace the code in the MainPage.xaml with the code from the description above
3. Run the app on iOS (device or simulator - makes no difference)

Link to public reproduction project repository

https://github.com/ewerspej/maui-ios-system-font

Version with bug

7.0.49

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4 (at least)

Did you find any workaround?

Not really.

One possibility would be to manually add the gigantic SF Pro font family from Apple directly as a MauiFont asset, but that's far from ideal due to the sheer size of it.

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[jfversluis]

I see we've had some issues like this in the past. I wonder if we need to (re)apply something like this again: xamarin/Xamarin.Forms#8418

[Redth]

Yeah there's really no support to articulate Font weights independent of the font itself you specify in MAUI today.

We talked about how to do this nicely awhile ago: #1018
This design still looks like it needs some iteration, and it doesn't really help the system font case here either.

It looks like as Gerald pointed out that ".SFUI" is a bit of a magic string in Forms, though I'm not necessarily against the idea of introducing something in MAUI at least for System fonts only, to articulate font weight...

We'd need to come up a standard set of values that work reasonably well across platform, for instance System could always mean the default system font and then the combination of some weight name Semibold, Light, Bold, etc. etc. could articulate the weight, so you might end up with System-Bold which would mean the most correct system font with that weight possible.

[ewerspej]

It looks like as Gerald pointed out that ".SFUI" is a bit of a magic string in Forms, though I'm not necessarily against the idea of introducing something in MAUI at least for System fonts only, to articulate font weight...

The existing behavior from XF should be supported in MAUI since a lot of apps that are being migrated at the moment will rely on this. Adding fonts manually is a workaround, but only for fonts that are available and that don't increase the app size drastically. The San Francisco font family is quite large and I don't think it's feasible to add it.

[ewerspej]

Update: It seems to work on MacCatalyst, if that is of any help.

[returnZro]

I see we've had some issues like this in the past. I wonder if we need to (re)apply something like this again: xamarin/Xamarin.Forms#8418

Yes, I tried applying the changes in this pull request via a handler mapper and it works. But the downside is, I have to do it separately for Labels and Buttons.
I would prefer if these are added to base mappers by default so that existing xamarin.forms apps using system font variants wont break.

private static void MapSystemFont(ILabelHandler handler, IFontElement label)
{
        var fontFamily = label.FontFamily;
        
        if (!fontFamily.StartsWith(".SFUI", StringComparison.InvariantCultureIgnoreCase)) return;
        
        var size = (float)label.FontSize;
        var fontWeight = fontFamily.Split('-').LastOrDefault();

        if (!string.IsNullOrWhiteSpace(fontWeight) && Enum.TryParse<UIFontWeight>(fontWeight, true, out var uIFontWeight))
        {
            handler.PlatformView.Font = UIFont.SystemFontOfSize(size, uIFontWeight);
        }
        else
        {
            handler.PlatformView.Font = UIFont.SystemFontOfSize(size, UIFontWeight.Regular);
        }
}

[ewerspej]

@returnZro That workaround works, which is great. I'll use this for the time being. Thank you for this ❤️

[returnZro]

Sadly, I couldn't find a workaround for Android system font aliases sans-serif-medium, sans-serif-light etc.,
Setting font family directly to one of the aliases results in following runtime error -

Microsoft.Maui.FontManager: Warning: Unable to load font 'sans-serif-medium' from assets.

Java.Lang.RuntimeException: Font asset not found sans-serif-medium
   at Java.Interop.JniEnvironment.StaticMethods.CallStaticObjectMethod(JniObjectReference type, JniMethodInfo method, JniArgumentValue* args) in /Users/runner/work/1/s/xamarin-android/external/Java.Interop/src/Java.Interop/obj/Release/net7.0/JniEnvironment.g.cs:line 12890
   at Java.Interop.JniPeerMembers.JniStaticMethods.InvokeObjectMethod(String encodedMember, JniArgumentValue* parameters) in /Users/runner/work/1/s/xamarin-android/external/Java.Interop/src/Java.Interop/Java.Interop/JniPeerMembers.JniStaticMethods.cs:line 151
   at Android.Graphics.Typeface.CreateFromAsset(AssetManager mgr, String path) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net7.0/android-33/mcw/Android.Graphics.Typeface.cs:line 613
   at Microsoft.Maui.FontManager.LoadTypefaceFromAsset(String fontfamily, Boolean warning) in D:\a\_work\1\s\src\Core\src\Fonts\FontManager.Android.cs:line 122
  --- End of managed Java.Lang.RuntimeException stack trace ---
java.lang.RuntimeException: Font asset not found sans-serif-medium

XF	MAUI

@jfversluis - any suggesstions for a workaround on Android?

[jfversluis]

@returnZro I believe this is fixed here #15759 maybe there is some hint in there to come up with a workaround until it's released

[returnZro]

@returnZro I believe this is fixed here #15759 maybe there is some hint in there to come up with a workaround until it's released

Thanks @jfversluis !! I was able to apply the changes from that pull request locally. Any idea when can we expect that changes to be released?

[ewerspej]

@returnZro @jfversluis It would be great if it could make it's way into the .NET 8.0 release in November. However, even that's still a long ways in modern software release cycles, so maybe this can be picked up in @PureWeen's bug fixes and workarounds package?

[jfversluis]

It will be in .NET 8 for sure. Maybe sooner, but not very likely.

[Redth]

For now I've created a PR which fixes the already included code and previous XF behaviour of being able to specify ".SFUI-Bold" as a font. Given the code was already there, this feels more like a bug for now than a "we overhauled the font system and this doesn't make sense anymore".

I'd still like to eventually have a nicer way to articulate this, and for Apple, there's UIFontDescriptorSystemDesign which has a few constants: Default, Monospaced, Rounded, Serif, of which we're really only using the Default equivalent with this .SFUI-[weight] 'feature'. Android has a few options for serif/san-serif/etc, and perhaps it makes sense to have another PR here to do something similar, but I think it's worth trying to find some xplat common denominator here, even if that is just by means of a magic string convention, so we aren't writing as much platform specific code, which is the goal here :)

I could see a convention something like: System-[design]-[weight]-[style] where [design] is one of Serif, SanSerif, Mono, Default, and [weight] is Bold, SemiBold, Default, etc... and [style] is Oblique, Default.

Out of scope here, but something to consider longer term.