WASM: 'Segoe UI' not observed if UnoDefaultFont is set to None (Windows)

[remokeitel]

Current behavior

• font-family style is set to 'font-{random_number}'
• @font-face definition for 'Segoe UI' in Fonts.css is ignored

Expected behavior

• font-family style is set to 'Segoe UI' or 'Segoe UI Variable'
• @font-face definition for 'Segoe UI' in Fonts.css is used

How to reproduce it (as minimally and precisely as possible)

• create default Uno.Sdk project
• set UnoDefaultFont to None
• start app as WebAssembly in Windows

Workaround

• overwrite all Style and FontFamily resources, where font family is set to XamlAutoFontFamily in themeresources.xaml (which are resolved in WinUI 3 app as 'Segoe UI Variable' and not 'Segoe UI'), e. g. <wasm:FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</wasm:FontFamily>

Works on UWP/WinUI

Yes

Environment

Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia

NuGet package version(s)

No response

Affected platforms

WebAssembly

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[jeromelaban]

Thanks for the report. Could you tell why you need this font to be used specifically? Note that forcing this font will not work on non-windows systems.

[remokeitel]

Segoe UI is only used for Windows, see Fonts.css file in a default Uno.Sdk project.
Without setting UnoDefaultFont to None, Open Sans is used for WebAssembly on Windows, too. But I want to use platform-specific fonts.

[jeromelaban]

I see, thanks.

On Wasm, platform specific is not particularly relevant, unless you'll use the browser agent to determine which font to load. Is that the case?

[remokeitel]

Please see default Fonts.css:

/* https://github.com/unoplatform/uno/issues/3954 */
@font-face {
  font-family: 'Segoe UI';
  src: local('Segoe UI'), local('-apple-system'), local('BlinkMacSystemFont'), local('Inter'), local('Cantarell'), local('Ubuntu'), local('Roboto'), local('Open Sans'), local('Noto Sans'), local('Helvetica Neue'), local('sans-serif');
}

With that style the platform-specific font is used, no code needed. For that, 'UnoDefaultFont' must be set to 'None', see Custom Fonts: Disabling Open Sans.

But without overwriting WinUI/UWP resources with 'XamlAutoFontFamily' as font family the CSS is not applied, because the font family is wrongly set to "font-{random_number}". Then, in my bug case, 'Times New Roman' is used as default font family. This describes the bug in this issue.
On older versions of Windows 'XamlAutoFontFamily' was not available and all 'FontFamily' property values were set to 'Segoe UI'. I think, therefore, the issue occurred, because of the change in the WinUI/UWP 'generic.xaml' and 'themeresources.xaml'.

[jeromelaban]

I see. Indeed, we changed this behavior recently so that the right fonts are set everywhere, regardless of UnoDefaultFont.

The code that handles this part is:

uno/src/Uno.UI/UI/Xaml/UIElement.TextHelper.wasm.cs

Lines 80 to 99 in 676a751

	internal void SetFontFamily(object localValue)
	{
	if (localValue == DependencyProperty.UnsetValue)
	{
	ResetStyle("font-family");
	}
	else if (localValue is FontFamily font)
	{
	var actualFontFamily = font.Source;
	if (actualFontFamily == "XamlAutoFontFamily")
	{
	font = FontFamily.Default;
	}
	SetStyle("font-family", font.CssFontName);
	font.RegisterForInvalidateMeasureOnFontLoaded(this);
	}
	}

Which probably would need to be changed to something else when None is set.