Uno: Support for Segoe fonts

[jeromelaban]

The Segoe fonts from Windows are restricted in use for Windows only, and cannot be hosted or freely used in another environment. See this document.

The most important one for Uno is Segoe MDL 2, which is used in SymbolIcon. Uno replaces it with Microsoft OpenSource Symbol Font, but many of the symbols do not match (see #2834, #2766).

A possible solution would be to create a font that is similar to Segoe MDL 2 with the appropriate, either from the existing opensource ones if legally possible, or as a brand new font.

[MartinZikmund]

This issue also contains related discussion - #967

[ajpinedam]

Reproducible also on macOS. The CheckBox Inderterminant state uses a Glyph that is showing as a question mark.

[jeromelaban]

In a previous discussion @scottkuhl mentioned that the fonts provided by the Fluent UI design may be a good replacement for the older WinJS symbols set. It seems to be using the same glyphs codes, and looks like the original Segoe MDL font.

There's a catch, though, as the license states the following:

---

License Grant

Microsoft grants to Developer, a non-exclusive, revocable, worldwide, non- assignable, non-transferable, royalty-free license to use the Fabric Assets (defined below) or a subset of them (e.g. the ‘Toolkit’) exclusively for the following purposes:

a. In connection with the use of a Microsoft API within the development of a software application, website, or product you create or a service you offer designed to provide access or interact with a Microsoft service or application (“Application”)
b. To illustrate that Application integrates with one or more Microsoft products and services.

---

This seems rather restrictive for the use in Uno.

[pkar70]

It depends how (a) is interpreted. "OR" range :)

"In connection with the use of a Microsoft API within the development of:
( a software application, [OR] website, OR product you create ) OR (a service you offer designed to (provide access OR interact with) ( a Microsoft service OR application ))"
would allow using this font.

But:
(a software application, [OR] website, OR product you create OR a service you offer ) designed to ((provide access OR interact) (with a Microsoft service OR application))" would not.

But maybe someone from Uno (Nventive?) simply ask Microsoft if they allow Uno to include Fluent UI font in distribution?

[MartinZikmund]

Microsoft just published Fluent Icon library - https://www.figma.com/community/file/836835755999342788

Figma

Figma - Microsoft Fluent System Icons | This is a set of the 24px Microsoft Fluent System Icons - used for products across Microsoft. Thi...

This is a set of the 24px Microsoft Fluent System Icons - used for products across Microsoft. This reimagined set of icons is derived from Microsoft’s MDL2 and Monoline icon sets. The Fluent System Icons are friendlier, have rounded corners, simplified shapes and come in 2 themes: Regular & Filled.

[kakone]

There should be a change soon about licensing, look at this discussion.

[robloo]

Should this be closed now?

[jeromelaban]

It can indeed. Thanks!

[DierkDroth]

@jeromelaban would you mind clarifying the current status of this issue (unfortunately it's not clear to me even after reading through links above):

• could Segoe fonts now be used in UNO WASM, iOS, Android without conflicting with any license regulation?
• if not, is this the recommended replacement? https://github.com/unoplatform/uno/pull/3744
  -- would there be documentation on how to apply these fonts?
  -- would they be applied to UWP as well to have the exact same look and feel?

Thanks in advance

[jeromelaban]

@DierkDroth No, the Segoe fonts cannot be used outside of Windows. This issue is closed because Uno provides its own font that replaces Segoe MDL for Uno.

The documentation is available here.

It may be possible to replace the font on Windows, but the Uno fluent font may not yet define all the symbols used by Windows. You may also need to change all the resources that define symbol fonts in WinUI, and that may not be possible for some controls.

[DierkDroth]

Thanks for clarification, @jeromelaban

[DierkDroth]

@jeromelaban I'm sorry, I'm still struggling with the documentation. I have buttons like this in my (UWP) code:
Content = "\uE974"; FontFamily = new FontFamily("Segoe MDL2 Assets");

How would I need to change that code to have the "uno-fluentui-assets.tff" font active?

BTW: CheckBoxes are looking OK now

[DierkDroth]

BTW: CheckBoxes are looking OK now

@jeromelaban I stand corrected: although CheckBoxes look OK on iOS, they don't on WASM: the checkmark is missing as a CheckBox is checked.

[robloo]

I've seen the CheckBox issue on Skia as well I think. Might warrant a new issue.

[jeromelaban]

@DierkDroth CheckBox is now using the new fluent symbols font. As for the locations where Segoe MDL2 Assets is used, for now it is best to use the SymbolThemeFontFamily resource instead and avoid referencing Segoe MDL2 Assets directly.

[DierkDroth]

@jeromelaban can you confirm that the checkmark for CheckBox on WASM is not working?

[jeromelaban]

@DierkDroth no, the CheckBox is working properly. Make sure to reference the new font in your application.

[DierkDroth]

@jeromelaban sorry I'm still lost:

• iOS: using SymbolThemeFontFamily instead of "Segoe MDL2 Assets" as FontFamily fixes the icons -> good
• WASM: using SymbolThemeFontFamily instead of "Segoe MDL2 Assets" breaks the few icons which had been working before and now no icon are there at all -> bad

Here is what I tried:

• migrated the project as per your instructions above
• replaced content of Font.css as per instructions
• cleaned solution
• deleted obj and bin folders
• pressed a couple of times CTRL-F5 in the brower

Nothing helped: there now are no icons at all in WASM, just default place holders

[jeromelaban]

@DierkDroth this means that the font is not loaded properly. Can you validate that the generated HTML for those placeholders is using the proper font ?

[DierkDroth]

@jeromelaban I'm not exactly sure where you wanted me to look.

Anyway, here is what I found:

• in bin/Debug/netstandard2.0/dist/Index.html I see this line
  <link rel="stylesheet" type="text/css" href="./package_498c8f8bfa516d21d155a50cc12ae61751583400/Fonts.css" />

• the referenced file is attached below

Is that what you're looking for?

Fonts.zip

[jeromelaban]

@DierkDroth I'm talking about inspecting the DOM elements using the browser debugger, and see if the specific elements displayed are actually using the requested font. Is that the case ?

[DierkDroth]

I'm sorry I would not know what to do and how to do that. Where would I find exact steps?

Also: wouldn't the fact that no icons are displayed already prove that the "wrong" font is used?

[DierkDroth]

@jeromelaban I added a sample project to demonstrate the problem.
UnoFonts.zip