[Bug] ExportFont not working on UWP

[JasonLooney]

Description

Custom fonts are not showing up in UWP when the new ExportFontAttribute is used.

Steps to Reproduce

1. Add a TTF or OTF file from Google Fonts, FontAwesome, icomoon, etc. as an embedded resource in your shared project
2. Add the ExportFont attribute to your assembly. e.g. [assembly: ExportFont("FA5Regular.otf", Alias = "FontAwesome")]
3. Reference the font family in XAML markup
4. Compile and run the UWP app

Expected Behavior

Custom font should be used.

Actual Behavior

Custom font is used in iOS and Android, but not UWP.

Basic Information

• Version with issue: 4.5.0.617
• Platform Target Frameworks:
  • iOS: 13.4
  • Android: 9.0
  • UWP: 18362

Reproduction Link

https://github.com/jfversluis/EmbeddedFontsSample

[jsuarezruiz]

Embedded Fonts with format TTF or OTF are working in Android and iOS.

In UWP, Fontawesome OTF font is not working as expected:

[scottkuhl]

I am experiencing the same issue. It seems like UWP is always an afterthought with Xamarin.Forms and isn't supported nearly as well. I understand it's usage is probably far less than Android or iOS, but it's very frustrating.

[ktd12]

I had this problem on UWP as well. However I got it to work when I dropped the Alias from the ExportFont declaration.

Here's what I did:

1. I created my own font. The glyphs I used were all mapped to lowercase characters
2. In my shared projected in App.xaml.cs I added: [assembly: ExportFont("karenfont.ttf")]
3. I added karenfont.ttf as an embedded resource to the top level directory of my shared project.
4. In my xamarin forms xaml file I had this:
   <Button Text="b" FontFamily="karenfont"/>

This now works on UWP. It does not work on Android. I am using Xamarin Forms v4.5.0.617

[MitchBomcanhao]

I am experiencing the same issue. It seems like UWP is always an afterthought with Xamarin.Forms and isn't supported nearly as well. I understand it's usage is probably far less than Android or iOS, but it's very frustrating.

I think that a lot of Xamarin developers (and visual studio developers that work on stuff that relates to Xamarin) only use macs, and when they use windows they purely ignore UWP. sometimes they include UWP in the sample projects, but RARELY are they shown on video presentations - so I'm not even sure that the features being demoed actually function on UWP.

@jsuarezruiz I am now trying ExportFont on the first release version of Xamarin 4.6, I've followed the example shown on a Xamarin video and guess what, it doesn't work on UWP, I just get squares. Works just fine on Android. As per the example in the FlyMe app, I'm not using an Alias. the font file is on the top level of the shared project. doesn't work.

[joshminor]

I'm in the unfortunate position of having to support iOS,Android, and UWP for our product and the fact that UWP gets left behind so often had led to us having to wait several release cycles to actually use new features.
We've got three custom fonts that we load. For whatever reason the icon font is the only one I can't get to load for UWP. The other two platforms have no issues.

[MitchBomcanhao]

@joshminor so you get 2 out of 3 fonts working on UWP with this method?
Maybe there's something specific to some fonts that is causing the issue...

[joshminor]

Actually, I just realized that the two fonts that work are installed as system fonts on my Windows test machine... so that may have something to do with it.
Edit
I tried installing the non-working font, it changed nothing. I tried an entirely different font from Google WebFonts ("Lobster") and it works without any issues (except aliases don't work)

[MitchBomcanhao]

I've tried the lobster font and the only way it worked was if I had it installed on the system. the font embedding didn't work.

Edit: I take it back, it did work (I had a typo in the name). so, it seems that some fonts work and some fonts don't? very intriguing

[MitchBomcanhao]

a bit more info

I've grabbed this google font, renamed the file and its references in the code from Lobster-Regular.ttf to Lobster-Regular-renamed.ttf - this made it stop working. Put the original name back on, and it works again.
this likely indicates that the filename must match some internal property in the font itself in order for it to work, and could explain why people have different results with the same implementation - it depends on something within the font file itself.

[ktd12]

I just upgraded to Xamarin Forms 4.6.0.726 and my embedded font, karenfont, is still working on UWP (Windows 10 1903). It is still not working on Android (Android 10).

[joshminor]

The font that won't load for me is a custom icon font, I verified with FontForge that the internal font family names are exactly the same as the file name, still won't load. I'm sure there is a pattern here somewhere. For the time being I'm going to fallback to the way we loaded fonts before (per-platform resources)

[ktd12]

I created my custom font using the IcoMoon App. What may be of interest is that embedding karenfont didn't work until I mapped the glyphs to letters and then referenced the letter in my xaml (as opposed to using the hex code like:  )

[MitchBomcanhao]

I've recreated my font file and see that it can work, but it seems like the fontname and the filename need to be similar for it to have a chance of working.

I've also found that even when it appears to work, not all UI elements work as expected, ie toolbar icons with font image source don't seem to be working, I just get a square instead of the proper icon.

[jdinnen]

I'm having the same issue using the MaterialDesignIcons Font (https://materialdesignicons.com/), works fine on iOS and Android but all rectangles on UWP.

[CliffAgius]

See the same here if the Font pack is installed it seems to work but if it's part of the project like FontAwesome or MaterialDesignIcons which are not installed on the machine it will not work just little rectangles.

Going back to the old way of adding to each project and referencing in the ResourceDictionary works but that is more work and not the new hotness.

Not sure if this is a regression or it's never worked as my other projects have not included UWP.

[MSiccDev]

same here, seeing only squares on UWP...

[RyanGaudion]

Any update as to when this will be resolved?

[Adrien6]

Same here... hopeless UWP...

[AlleSchonWeg]

Same here. Looks like UWP is dead.

[CliffAgius]

Ok All I need this fixed for my current project so I am going to take a look at fixing it.

@samhouts @jsuarezruiz can you please show this as being worked on. Thanks

[johncao158]

Xamarin.Forms: 4.8.0.1269
ExportFont works for Android, but not UWP

Instead of using ExportFont in the shared project, here's a workaround:

1. Copy your font file (xxx.ttf) to the Assets folder in Androind and UWP project:

[Android]:
Assets/xxx.ttf
Build Action: AndroidAsset
Copy to Output Directory: Do not copy

[UWP]:
Assets/xxx.ttf
Build Action: Content
Copy to Output Directory: Do not copy

2. Sets the FontFamily property for your text:

       <Label.FontFamily>
            <OnPlatform x:TypeArguments="x:String">
                <On Platform="Android"
                    Value="xxx.ttf#Font Name" />
                <On Platform="UWP"
                    Value="/Assets/xxx.ttf#Font Name" />
            </OnPlatform>
        </Label.FontFamily>
   

Now it works as expected!

[activa]

@johncao158 That's the legacy way of using custom fonts in Xamarin Forms, which has worked since the beginning. This issue is specifically about [ExportFont] not working on UWP. The workaround you suggested still doesn't allow you to add the fonts as an embedded resource.

[RobertoGFilho]

My project works this way:

[SHARED PROJECT]
AssemblyInfo.cs
[assembly: ExportFont("entypo.ttf", Alias = "entypo-plus")]
Fonts/entypo.ttf "for iOS and Android"

Build Action: Content
Copy to Output Directory: Do not copy

[solomonfried]

My project works this way:

[SHARED PROJECT]
AssemblyInfo.cs
[assembly: ExportFont("entypo.ttf", Alias = "entypo-plus")]
Fonts/entypo.ttf "for iOS and Android"

Build Action: Content
Copy to Output Directory: Do not copy

You are correct. This new feature works on iOS and Android.
The issue is that it will not work on Windows unless the font is already installed on the machine.

[BillyMartin1964]

Why was this closed? Although custom fonts work in UWP debug, they don't work in a release version.

When i use them in a release version sideload, the page that the custom font is on is completely blank. When I comment out the font family in xaml, the page appears fine... but without custom fonts, of course.

I also checked in the windows/font folder and the font was on the laptop I installed the app on.

[ArtjomP]

I have the same issue as @BillyMartin1964 on UWP release even with the latest XF 4.8.0.1534+384-sha.712849b9d-azdo.4114742

[kevcrooks]

We have the same issue too as @BillyMartin1964 - it was very confusing as the fonts work fine on Android/iOS and even UWP in Debug mode, but not in Release mode.

@samhouts is there a work-around we can use for this, and can the issue be re-opened to fix for UWP release mode too?

[BillyMartin1964]

At the very least, can we have code that ignores the custom font if it isn't installed in the user's computer/XBox?

[ArtjomP]

At the very least, can we have code that ignores the custom font if it isn't installed in the user's computer/XBox?

I think you can add two elements on the page and make them visible depending on the platform they're running on. Use OnPlatform for that.

[BillyMartin1964]

@ArtjomP , that's not the problem. The entire page is blank when we use the embedded font on a release build sideload to another PC. Someone said it's because the other PC did not have the font previously installed. I'm not sure about this, but if that is the case, we need to test for the installed font and not use it if it isn't installed.

Personally, I think it's another issue because it appears that the font was in the font folder on the user's machine.

[ArtjomP]

@BillyMartin1964 pretty strange my pages all work well on UWP release. The labels with custom font only show square as on the picture above from @jsuarezruiz

[BillyMartin1964]

@ArtjomP , are you installing to another machine?

[ArtjomP]

@BillyMartin1964 sure I'm developing apps on my machine, CI with UI testing on another one and users use my apps from the Store on their PC & Xboxes

[BillyMartin1964]

@ArtjomP , can't tell you about the store because I'm afraid to use it on a production app. I can tell you, the only difference between the page being blank white or not is removing the FontFamily attribute. The square seems to be an icon on his.

[ArtjomP]

@BillyMartin1964 you could try to remove obj & bin folders & rebuild your project with FontFamily attribute included. It helps to get rid of mysterious errors sometimes.

[MichielDG]

Why was this closed? Although custom fonts work in UWP debug, they don't work in a release version.

When i use them in a release version sideload, the page that the custom font is on is completely blank. When I comment out the font family in xaml, the page appears fine... but without custom fonts, of course.

I also checked in the windows/font folder and the font was on the laptop I installed the app on.

There is a new issue for this: #12404