Can't consume a custom font in GraphicsView

[gdamino]

Description

Assuming a font registered globally with:

public static MauiApp CreateMauiApp()
{
  var builder = MauiApp.CreateBuilder();
  builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
      fonts.AddFont("MyFont.ttf", "MyFont");
    });
  return builder.Build();
}

In the Drawable implementation of a GraphicsView when I try to use that font:

using Font = Microsoft.Maui.Graphics.Font;
public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            canvas.Font = new Font("MyFont");
  ....
}

the canvas ignore that font. And this is a big problem because we are porting an app from Xamarin (we was using SkiaSharp) to MAUI and we made a diffuse use of this kind of object. I'm wrong with some thing or this is a bug? thanks in advice

Steps to Reproduce

1. Create a new .Net MAUI project
2. Register a custom font in CreateMauiApp() -> MauiProgram.cs
3. Use that font in a canvas (in the Draw() function of a IDrawable interface implementation of a GraphicsView)

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 7 and Up

Did you find any workaround?

no

Relevant log output

no log

[gdamino]

Any workaround or proper way to use custom fonts with Graphicsview?

[profix898]

Same problem here. I'm working on a graphics-heavy MAUI app. Unfortunately, there appears to be no supported way for using custom MAUI fonts with Maui.Graphics. Really?!

I found a corresponding issue from June 2022 in the Microsoft.Maui.Graphics repo: dotnet/Microsoft.Maui.Graphics#451

[profix898]

Actually, this was initially reported back in August 2021: dotnet/Microsoft.Maui.Graphics#232

[gdamino]

Same problem here. I'm working on a graphics-heavy MAUI app. Unfortunately, there appears to be no supported way for using custom MAUI fonts with Maui.Graphics. Really?!

I found a corresponding issue from June 2022 in the Microsoft.Maui.Graphics repo: dotnet/Microsoft.Maui.Graphics#451

I solved rewriting it using SkiaSharp package, if you don't have an huge amount of code you can try this way. I don't know why MAUI developers don't prioritize graphics instead of other minor things. MAUI is basically not usable for a big company app, by our test is slower than Xamarin (which in itself was very slow), it don't resolve any problem of Xamarin and brings new MAUI specific problems. Graphics is the way to speed user interface because drawing is 100x faster but it is completely abandoned. This issue, and other similar ridicoulus issues, suggests that there are very few companies producing apps with MAUI, and this is a big problem.

[Mashedpoturtles]

Is it JUST not working in graphics? Because for me consuming fonts don't work in general

[rjhind]

I'm seeing this on iOS too. The custom font works across our application just not when used as a Graphics.Font with ICanvas.DrawString.

[xtuzy]

Try custom draw string api. Current Maui have Maui.Font and Graphics.Font, Maui.Font can get better support by FontManager, ICanvas's draw text api use Graphics.Font, it don't use FontManager to get platform font, so have some bug, you can copy DrawText source code of PlatformCanvas, and use Maui.Font to convert to platform font, not use Graphics.Font. I have some code: https://github.com/xtuzy/Yang.Maui.Helper/tree/master/Yang.Maui.Helper/Graphics

[rjhind]

Any update if this will be fixed in .Net 8?

[DoubleDBE]

I'm also wondering where this stands. We really need this to work for .NET 8!

[lfmouradasilva]

Any updates?

[danielancines]

This feature will be great to customize text controls made on Canvas.

[homeyf]

Verified this issue with VSM 17.6.7 (build 417). Can repro on Android platform.

[john-hollander]

The workaround for this is to use "MyFont.ttf", instead of "MyFont" for Android - i.e. the full name of the font file, instead of the alias. However, using the full name won't work for Windows or iOS, so you'll need a special case.

[billreiss]

The workaround for this is to use "MyFont.ttf", instead of "MyFont" for Android - i.e. the full name of the font file, instead of the alias. However, using the full name won't work for Windows or iOS, so you'll need a special case.

@john-hollander using the full name works for me on Android, do you have something that works on iOS and Windows?

[john-hollander]

The workaround for this is to use "MyFont.ttf", instead of "MyFont" for Android - i.e. the full name of the font file, instead of the alias. However, using the full name won't work for Windows or iOS, so you'll need a special case.

@john-hollander using the full name works for me on Android, do you have something that works on iOS and Windows?

I have an example here, that you can look at: https://github.com/john-hollander/Maui-Tests/tree/master/IDrawableFontTest

A few notes:

1. Make sure to configure the font in the MauiProgram class.
2. Make sure the font is in the Fonts subfolder of the Resources folder, and the build action is set to "MauiFont".
3. The canvas.FontSize = fontSize * 0.9921f; line is there to adjust the font size to fit inside the drawing rectangle because otherwise it overflows (comment it out and see).
4. I set it up so that you can tap on the form to resize the text for testing purposes.
5. It's dirty, but good enough to test things out with.

[jsuarezruiz]

The main problem is that we have two font types and two different approaches to manage fonts in Graphics and Core. Only in Core we have and use IFontRegistrar which allows us to resolve the path to a font given its name:

fonts.AddFont("FontName-FontType.ttf", "FontName");

We don't use this in Graphics. To resolve the issue we will require changes to public APIs. We could take two approaches:

• The one that requires more changes but that I think is better, move IFontRegister and other dependencies to Graphics as we already have, for example IFont, leaving a single implementation that will use the same logic to register and resolve fonts everywhere, Core and Graphics.
• Move only what is essential and apply the minimum changes. Still, it requires changes to public APIs and access to IFontRegistrar from Graphics. @matthoi

So, it requieres changes, a fix. As a workaround for now, custom fonts are supported on each platform although it is not enough to use the font name. On Android, for example, it would be:

fonts.AddFont("FontName-FontType.ttf", "FontName"); Font font = new Font("FontName-FontType.ttf");

@mattleibow Thoughts?

[anotherlab]

I'm all for doing the first approach of moving IFontRegister and friends to Graphics. One of the benefits of using .NET MAUI over other frameworks is the ability to create a custom control with little to no platform-specific code.

[Dokug]

Is there any indication when this might be fixed? For me, this is working on neither Windows nor iOS/Mac.

I would need this functionality for an important custom control, but if this isn't supposed to be fixed in the intermediate future, I'll start looking for alternate implementations right away..

[yurkinh]

Any updates on this?

[jsuarezruiz]

Example using https://learn.microsoft.com/es-es/typography/font-list/showcard-gothic

#if ANDROID
            canvas.Font = new Microsoft.Maui.Graphics.Font("SHOWG.TTF");
#elif IOS
            canvas.Font = new Microsoft.Maui.Graphics.Font("Showcard Gothic");
#elif WINDOWS
            canvas.Font = new Microsoft.Maui.Graphics.Font("SHOWG.TTF#Showcard Gothic");
#endif

This as workaround meanwhile, the bug is fixed.

[Dokug]

I'm sorry to report that this doesn't work for me, using MAUI 8.0.21 I've registered my font in the MauiProgram using the standard fonts.AddFont("MCDU.ttf", "MCDU"); and tried your workaround with

#if IOS || MACCATALYST
        canvas.Font = new Microsoft.Maui.Graphics.Font("MCDU");
#elif WINDOWS        
        canvas.Font = new Microsoft.Maui.Graphics.Font("MCDU.ttf#MCDU");
#endif

in my Drawable's Draw() method, but to no avail.

The drawn text does show up, but it is rendered using the "default" drawable font.

Update 1: With MAUI 8.0.40 this now seems to work on MacCatalyst but not on Windows Update 2: The same is true for MAUI 8.0.60 Update 3: The same is true for MAUI 8.0.71 Update 4: The same is true for MAUI 8.0.80