[Enhancement] Add an API to handle font families properly

[mattleibow]

Summary

Right now, the font system is pretty basic: fonts are registered and then used. This is fine for typical cases where there is just one font, but there are a few platform differences:

Android

• all fonts can be bold-ified, even those that are just a "regular" font
• adding a regular and a bold font face doesn't change anything since the regular is always used unless you explicitly load the bold
• a new API was added with Android API 29 to create typefaces from font families: https://developer.android.com/reference/android/graphics/fonts/package-summary
• loading a font by the alias does nothing special and a bold font can be made bold-er

The main reason for the way things are now is that Android does not have a font lookup system and fonts are just loaded via the literal typeface that was created around the data stream.

iOS

• the OS is unable to make regular fonts bold, and thus all faces in the family need to be registered
• depending on the families registered, the correct font face is loaded
• loading a bold font via an alias does not do anything and will just use that font

iOS has a font registration system where all fonts to be used are added to the system, and then using the OS-level lookups we get styles.

Windows

• like Android, the OS can force styles on any font
• loading a font via an alias is just the same as loading any font - the real family name is read from the font file

Unknowns

• If there was a way to create font families, how would this be done on Windows. It can be done using font lookup to search for all fonts in a family and then filter based on desired font weights/slants.

Idea

When registering a font, there should be a way to build up the font family for the OS:

builder.ConfigureFonts(fonts => {
    fonts.AddFont("standalone.ttf", "Standalone");
    fonts.AddFont(new FontFamily {
        FamilyName = "Lobster Two", 
        Typefaces = {
            new FontTypeface("regular.ttf", FontWeight.Regular, FontSlant.Default),
            new FontTypeface("bold.ttf", FontWeight.Bold, FontSlant.Default),
            new FontTypeface("italic.ttf", FontWeight.Regular, FontSlant.Italic),
            new FontTypeface("bolditalic.ttf", FontWeight.Bold, FontSlant.Italic),
            new FontTypeface("thin.ttf", FontWeight.Thin, FontSlant.Default),
        }
    });
});

For iOS, this doesn't have to do anything, let the OS do the filtering.

For Android, we can use the new font API and fall back to basic checks and select the best match.

For Windows, using custom filtering to select the font as well as influencing the weight/slant properties of the control. For example, setting bold and a non-bold font, we can use the OS bold. But if there is a bold font, then we can use that. It seems that a bold font does not go bolder than the bold.

Pictures

Looking at the iages below, you can see they are not consistent. There are 5 "fonts", each with a change in weight/slant:

• none: empty string/null
• tnr: Times New Roman (system font that might not actually be available on the OS)
• lobster: the Lobster Two font from Google that has 4 variants (https://fonts.google.com/specimen/Lobster+Two)
• lobster bold: the same Lobster Two font, but this time using the bold alias
• custom: a regular-only font

Windows	iOS	Android

Content = new VerticalStackLayout
{
	new Label { Text = " ", HeightRequest = 40 },
	new Label { Text = "none | none", FontAttributes = FontAttributes.None },
	new Label { Text = "none | bold", FontAttributes = FontAttributes.Bold },
	new Label { Text = "none | italic", FontAttributes = FontAttributes.Italic },
	new Label { Text = "none | bolditalic", FontAttributes = FontAttributes.Bold | FontAttributes.Italic },
	new Label { Text = "tnr | none", FontFamily = "Times New Roman", FontAttributes = FontAttributes.None },
	new Label { Text = "tnr | bold", FontFamily = "Times New Roman", FontAttributes = FontAttributes.Bold },
	new Label { Text = "tnr | italic", FontFamily = "Times New Roman", FontAttributes = FontAttributes.Italic },
	new Label { Text = "tnr | bolditalic", FontFamily = "Times New Roman", FontAttributes = FontAttributes.Bold | FontAttributes.Italic },
	new Label { Text = "lobster | none", FontFamily = "Lobster Two", FontAttributes = FontAttributes.None },
	new Label { Text = "lobster | bold", FontFamily = "Lobster Two", FontAttributes = FontAttributes.Bold },
	new Label { Text = "lobster | italic", FontFamily = "Lobster Two", FontAttributes = FontAttributes.Italic },
	new Label { Text = "lobster | bolditalic", FontFamily = "Lobster Two", FontAttributes = FontAttributes.Bold | FontAttributes.Italic },
	new Label { Text = "lobster bold | none", FontFamily = "Lobster Two Bold", FontAttributes = FontAttributes.None },
	new Label { Text = "lobster bold | bold", FontFamily = "Lobster Two Bold", FontAttributes = FontAttributes.Bold },
	new Label { Text = "lobster bold | italic", FontFamily = "Lobster Two Bold", FontAttributes = FontAttributes.Italic },
	new Label { Text = "lobster bold | bolditalic", FontFamily = "Lobster Two Bold", FontAttributes = FontAttributes.Bold | FontAttributes.Italic },
	new Label { Text = "custom | none", FontFamily = "Dokdo", FontAttributes = FontAttributes.None },
	new Label { Text = "custom | bold", FontFamily = "Dokdo", FontAttributes = FontAttributes.Bold },
	new Label { Text = "custom | italic", FontFamily = "Dokdo", FontAttributes = FontAttributes.Italic },
	new Label { Text = "custom | bolditalic", FontFamily = "Dokdo", FontAttributes = FontAttributes.Bold | FontAttributes.Italic },
};

[charlesroddie]

Is there a need to expose the functionality of taking a font and altering its weight or slant? Reasons for not exposing this functionality:

• Automatic alteration of fonts will not generate well designed fonts, which is why iOS doesn't do it and why Adobe CC doesn't do it either.
• iOS doesn't do it and most people deploying MAUI would target iOS as a platform, and since iOS doesn't support it as you document it makes sense to deploy variant font files in the same way across platforms, instead of getting different (inferior) rendering on UWP/Android just for saving space.

[mattleibow]

That's the thing. This issue is to provide a way to have multiple font typefaces so they don't need to be altered.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.