FontFamily is not recognized in Unpackaged application in net 8

[danies8]

Description

This link not solved in NET 8.
[WinUI] FontFamily is not recognized in Unpackaged application
#9104

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[mattleibow]

Did you have a different font to the old issue? Or is that sample not working still?

[ghost]

Hi @danies8. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[danies8]

It is not working.
All icons that use fonts are not working.
Also I'm using telerik controls and they said this Microsoft bug.

[danies8]

In additions the controls not lóok good in unpackaged deployment.

[danies8]

[mattleibow]

I'll try get a copy of Windows Server 2019 up here, but, do the controls look correct if you make a plain WinUI app and run that on the server?

All the icons you point to here and the in other issue are OS icons, not maui icons. This may be an issue in Windows Server fonts/support.

[mattleibow]

You also have comments here: microsoft/microsoft-ui-xaml#7866

The comments from brad says: "This app is not MAUI but it is WinUI3."

[jeremy-visionaid]

Maybe a dupe of #15802 ?

[mattleibow]

Hmmm, could be. @danies8 are you using fonts on Label/Button or are using FontImageSource on Image/ImageButton?

[mattleibow]

@danies8 I did some tests now on my new Windows Server 2019 VS (with Desktop Experience) and I am not able to repro the dropdowns missing arrows and other text not rendering.

I was able to repro #15802 with FontImageSource not working.

MauiApp190.zip

This was my publish command:

dotnet publish -f net8.0-windows10.0.19041.0 -c Release -p:RuntimeIdentifierOverride=win10-x64 -p:WindowsPackageType=None -p:WindowsAppSDKSelfContained=true -p:SelfContained=true

[mattleibow]

Unless those are all Telerik controls? I think I need to see a repro at this point as I am not sure of exactly what you have.

[ghost]

Hi @danies8. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

Hi @danies8. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[danies8]

I used :
dotnet publish -f net8.0-windows10.0.19041.0 -c Release -p:WindowsPackageType=None -p:WindowsAppSDKSelfContained=true /p:PackageCertificateThumbprint="c01ba45666762f3615cf6813aeb4dc4b1919541d" -p:RuntimeIdentifierOverride=win10-x64

[danies8]

Please see : https://app.screencast.com/H2vDCa2jmYxCf

[danies8]

I also asked from Manager support of TELERIK (Lance) to answer here.

[LanceMcCarthy]

Hi Daniel,

I don't see how this is solely related to the Telerik UI for Maui components, as the problem is presented in a normal Maui Button or in another UI control, rather the issue seems to be missing assets when unpackaged for WinUI in this scenario.

Let's take a step back and align on some ideas before digging deeper:

• You are using our custom font in parts of your application
• That custom font is not registered correctly, so in unpackaged app, the font is missing
• We're not sure why it's missing, but it seems a workaround is to use the file path to the package assets in a custom Handler Loaded override. This fixes any relative paths to the resource's file.

That seems like you have a couple steps to do so that when your app is running unpackaged, you need to address this use case. Here are the fonts we use:

• https://github.com/telerik/maui-samples/tree/main/Samples/ControlsSamples/Resources/Fonts

If you have the demos installed locally, you will find them here:

If you open the font file, you will find all the information you need to register them separately (font family name, etc).

You did share a code snippet with me, all I can say about that is it is incorrect and looks like you copy/pasted a FontAwesome example without updating it to match the font file's actual FontFamilyName?

Some challenges for you:

• Shouldn't that be telerikcontrolsicons.ttf#telerikcontrolsicons instead?
• Did you include the font file in your project's Resources/Fonts directory?
  • If yes, did you confirm the file is being build as MauiIcon?
• Try using a different font file, if the issue only happens with telerikcontrolsicons.ttf, then I can open a separate case and escalate for you.

Continued Assistance

Since this issue is flagged with needs-info/needs-repo, you will need to do the following:

1. Create a new .NET MAUI project
2. Add the font files we use in our demos/control to Resources/Fonts
3. Update MainPage with a Button that uses a FontImageSource
4. Build and publish the demo app
5. Verify the problem exists on Windows Server 2019
6. Apply the recommended solution to the project, build/package/run again on Windows Server 2019 and check again

If the problem still exists, you can share the reproducible project with me and Matthew for further investigation.

Tips:

• Do not add a reference to Telerik controls to the demo/repo project. if the issue is related to missing font family/file/resources in an unpackaged app, adding the 3rd party library is an unnecessary complication
• If the problem does only exist for icons within the Telerik controls, I can open an issue with the Telerik UI for Maui dev team. If the Handler.Loaded workaround is a solution, we can write a KB article instructing how to handle this case.

Side Note

@mattleibow Telerik UI for Maui uses the telerikcontrolsicons.ttf as the source of icons throughout the controls. This usually doesn't require that the developer also include the fonts file in their project. I think this is the genesis of Daniel's motive ot open this Issue.

Although this time it affects RadButton for example, but it should affect any 3rd party library that has font assets in it (or anything that points to the appx package URI). I haven't dug into the WinUI threads on this topic, but I'm guessing when published unpackacked, the file paths to the package are incorrect?

[LanceMcCarthy]

As a side thought, @danies8 what happens if you actually install the missing fonts into Windows Server 2019 instead of relying on the app to use in-package assets? This could be a temporary workaround until the fundamental issue is resolved.

1. Download the file to the Windows Server 2019 machine and install it for All Users (if you don't know how, see this tutorial)
   • You can get telerikcontrolsicons.ttf from here
   • Check your project's Resources/Fonts folder for any other font files you might want to add
2. This should be repeated for any other custom fonts you are using (FontAwesome, etc)
3. Finally, run the unpackaged app again as see if the previously affected items are rendered

[danies8]

Hi,
1.Create a new .NET MAUI project
2.Add the font files we use in our demos/control to Resources/Fonts
3.Update MainPage with a Button that uses a FontImageSource
4.Build the app and there is error:

5.Sample:
FontsMauiApp.zip

[LanceMcCarthy]

there is error

Did you try building a couple times, or did you immediately post here after getting the error once? The reaosn I ask is the Resizitizer is a process that creates the correct assets for each platform (e.g. MauiIcon files).

This happens in a background thread and can lock the files it is working with. Sometimes, if you try to build too fast, or there's a different order of operations, you can encounter issues. Just Clean and Rebuild the app again, try it a couple times until it works. Be patient between attempts, or even close and restart Visual Studio if the lock isn't going away.

[LanceMcCarthy]

Daniel, I've reviewed the project and it is not what we asked for.

You did not complete the process if registering the fonts and there is nothing in MainPage that attempts to use the font.

Please do the following:

1. Update MauiProgram and finish registering the added font file. If you forgot how to do this, please see https://learn.microsoft.com/en-us/dotnet/maui/user-interface/fonts?view=net-maui-8.0
2. I do not see any changes to MainPage.xaml with anything that will try to use the custom font.
3. MOST IMPORTANT: Publish and run the app on Windows Server and verify it is broken

Once you've confirmed the behavior, get a screenshot, then come back here with the project and the evidence of the behavior.

[edit] Remove unnecessary narrative comment

[danies8]

Hi Matthew,
I've finished preparing the repro project that you can use the verify the problem with a normal Microsoft Label.

1.Here is the repro project, you can use the following command to build it unpackaged
665cebdb-64b9-44c0-89f8-d25c5f159313_UnpackackedFontsTest-Issue19061.zip
dotnet publish -f net8.0-windows10.0.19041.0 -c Release -p:WindowsPackageType=None -p:WindowsAppSDKSelfContained=true -p:RuntimeIdentifierOverride=win10-x64
2.Notice MainPage has two Labels.
3.Both Labels use an external font, a separate one for each
4.This works in a packaged app
5.It does not work in an unpacked app.

Let me know if you need anything else.

Thank you for your time and effort,

Dani

[mattleibow]

Just want to note that the sample did not compile because the <ApplicationId> contained an invalid character _. I had to remove that first before it would compile.

Once it ran, the same text appeared:

Packaged App	Unpackaged App

I believe this is because you have invalid XAML:

<Label Text="&amp;#xe85b;" ... />

This should be (note the & is now just &):

<Label Text="&#xe03a;" ... />

The reason for the first label being incorrect is a spelling error in the font name. It is registered as telerikcontrolsfonts but used as telerikcontrolsfont. But even this is incorrect, the font name is telerikcontrolsicons:

fonts.AddFont("telerikcontrolsicons.ttf", "telerikcontrolsicons");

<Label Text="&#xe03a;"
        FontFamily="telerikcontrolsicons" />

I have attached my sample:
UnpackackedFontsTest_Issue19061.zip

[ghost]

Hi @danies8. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

Hi @danies8. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[LanceMcCarthy]

@mattleibow thank you for helping Daniel with the unrelated clean up. Were you able to check if this works in unpackaged on Windows Server 2019? I'm still trying to get Azure to spin up a new one for me.

I have an idea, that if the unpackaged app isn't including font files which are embedded in the external assemblies, Daniel can workaround this by including the font file in his project code, registering them in MauiProgram and using CopyAlways as the Build Action (looking at the workaround for microsoft-ui-xaml/issues/7866, I feel that should also work here, too).

[danies8]

Thanks for info.
I tested your fix project on window 10 + server 2019 works correctly as exe!


Thnaks a lot for you and Lance.

[LanceMcCarthy]

@danies8 That's great news!

As you go to implement this on your real app, don't forget there are two parts to the solution:

1. Registering the fonts in your app code

2. Using CopyAlways for the font's TTF file's BuildAction

I don't know if you still need to use the handler, but just in case, this is the full code from MauiProgram.cs:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("telerikcontrolsicons.ttf", "telerikcontrolsicons");
                fonts.AddFont("telerikfontexamples.ttf", "telerikfontexamples");
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif

#if WINDOWS
        Microsoft.Maui.Handlers.LabelHandler.Mapper.AppendToMapping("FontFamily", (handler, element) =>
        {
            if (element.Font.Family == "telerikcontrolsicons")
            {
                const string FontTelerikControlsIconsFamily = "telerikcontrolsicons.ttf#telerikcontrolsicons";
                handler.PlatformView.FontFamily = new Microsoft.UI.Xaml.Media.FontFamily(FontTelerikControlsIconsFamily);
            }

            if (element.Font.Family == "telerikfontexamples")
            {
                const string FontTelerikControlsIconsFamily = "telerikfontexamples.ttf#telerikfontexamples";
                handler.PlatformView.FontFamily = new Microsoft.UI.Xaml.Media.FontFamily(FontTelerikControlsIconsFamily);
            }
        });
#endif

        return builder.Build();
    }
}

[mattleibow]

Awesome! Windows Server is cool again!

Can we close this issue as all fixed?

[danies8]

I didn't test it, does we need the handler as Lance
Wonder ?

[LanceMcCarthy]

@mattleibow yeah, it's confirmed working, so I would consider this closed.

@danies8 you have a 50/50 chance, it either works with it or not... but you know it's working with one of them 😁

[danies8]

Tomorrow morning I will check if handler is needed or not and let you know on both machines:
Window 10 +server 2019.

[danies8]

I removed the handler and the code work as expected using vs.
Also in publish mode in window 10 + server 2019.
We can close the ticket.