Xamarin.forms: [Bug] Embedded Fonts Not Recognized

[dansiegel]

Description

Using the Embedded Fonts in Xamarin.Forms 4.5 preview 1, a general TTF font seems to be working fine(*), however when using an OTF font such as Font Awesome it does not get rendered on iOS.

* NOTE that neither font works on Android

Also related to this... the Font Alias does not work.

Steps to Reproduce

1. Embed 1:* Fonts
2. Add the appropriate ExportFont Attribute(s) to the assembly
3. Use the PostScript Name for the font

Expected Behavior

The specified font should be used

Actual Behavior

The TTF font works on iOS but not Android.
The OTF font doesn't work on iOS or Android...

didn't check UWP.

Basic Information

• Version with issue: 4.5-pre1
• Last known good version: n/a
• Nuget Packages:

Screenshots

You can see the recorded stream https://twitch.tv/dansiegel

Reproduction Link

App5.zip

Workaround

n/a

[dansiegel]

worth noting btw, I tried this with a regular font, not Font Awesome Free and the OTF font did actually work on iOS..

[davidortinau]

I tried this PR build with the attached project and it didn't work. I did for a brief build have the material icons appearing, but I cannot reproduce that good luck.

The Raleway font works flawlessly.

I tried using EmbeddedFontResourceId = "ItesaMeDesignio.Styles.Fonts.material.ttf" and the Alias.

CruiseMobileUI.zip

[RedChops]

Oddly enough, I can't get a TTF to work in either platform (Material Icons), but an OTF a friend created works in iOS but not Android.

This is with the latest nightly - 4.6.0-240

[jsauve]

I'm seeing something similar. I've tried a few of Google's open fonts. They seem to work on iOS, but not Android. I put together a small sample: test.zip

[wagenheimer]

Same problem here! I wasn't able to use FontAwesome fonts at all.

[BenBtg]

Same issues here. Embedded FontAwesome working great on iOS but not on Android

[ahmad-crossplatform]

Same here iOS works but not Android

[noxe]

Any Info about this? Wondering why 4.5 is released with this known issues?

[zoli13]

Embedded fonts does not work on XF 4.5.0.356.
I tested on Android only.
See attached screenshot + project.

FontApp.zip

Note: it's really annoying, as SKIA gets the fonts from Embedded Resources, while XF only works with Platform Assets/Resource fonts. So, I need to deploy the fonts two times (one in .NET core shared/Embedded Res + one in the Platform/Assets), what a waste!

[noxe]

Any Info about this?

[almirvuk]

It does not work on Android with 4.6.0.379-pre1 as well.

[JPZV]

Hello, I had the same problem as you and I managed to solved at least some issues that I had:

First: There is an issue with a lot of files where the name is like: MyFont-Regular.ttf, the problem is that Android's asset cannot have the '-' in their file's name, so you should change all the MyFont-Regular.ttf to MyFont.ttf or MyFontRegular.ttf
Second: You _don't_ need to copy the files in the iOS project as it's being copied while compiling (sometimes it could fail though), but you will need to copy the font's file to the Droid project because somewhy it's not being copied at all.
Third: The FontFamily stills being used like in the old system. i.e. You will need to set that property to MyFont.ttf#MyFont-Alias in Android and just MyFont in iOS.

Of course this should not be like intended. Maybe all these points are easy to fix for the Xamarin team as they must be done while compiling.
Also this doesn't work always. My app uses Lato and (just for now) Segoe MDL2 Assets. Lato works fine in both Android and iOS using the steps before. But somewhy Segoe doesn't work in iOS (in Android works, but I think is because I need to copy the file to its project, and that is the only requeriment to use custom fonts in android, so actually the Embedded font is useless for now in Android). The only fix to this is to copy the file into the iOS project and add its reference to info.plist (I don't know if this is a issue with Segoe, or with having multiple fonts, or if actually the Lato font is included in iOS).

I forgot to say that I'm using 4.5.396 with everything (from Visual studio to every Nuget Package) in the latest stable version

[dfarrNTST]

Is it possible to get some guidance on how this actually works or doesn't work? What is supported, what isn't supported? We have not been able to get any of this working in any solution...new or old based on the documentation in the release notes. The documentation simply states to add the font file to the shared project, set as Embedded Resource, ExportFont in AssemblyInfo.cs, and use. This does not work for Font Awesome 5 otf or Lato font or any other font we typically use.

Since this is "live", can we please get some detailed guidance on how to properly use this as it exists in the production NuGet package today? Else remove it completely...its terribly confusing. Putting in the words (PREVIEW!) and not providing any details on what works, doesn't work, what is supported, what isn't supported...just wasted tons of our time banging our heads against a wall with no resolution. We're just coming to the conclusion that its a buggy mess and just want to ignore it completely.

[wagenheimer]

@pauldipietro Do you have something to tell about this? It seems that there isn't anybody checking this bug.

[jfversluis]

@wagenheimer actually, just last week we have merged a PR (#9194) that should fix the working of this :) if you're feeling adventurous you can check out our nightly feed which should have the fix. If not, within a week there should be a new 4.5 service release which also has this fix.

Please be sure to try it and let us know so we know if this can be closed or we need to fix it some more. Thanks!

[ahmetkocadogan]

I updated my Xamarin.Forms nuget packages to 4.5.0.495 to try this, and in android emulator, embedded fonts worked like expected. But when i publish the android app (i use aab), and download from google play to device via update, i noticed embedded fonts are not working.

[VladislavAntonyuk]

I think it would be nice if somebody attach a sample with most popular fonts (e.g. FontAwesome)

[jfversluis]

@ahmetkocadogan would you be somehow able to verify it does work with an APK? Also I think the new service release coming out this week will have some improvements, when that comes out please try that and let us know if that fixes it.

@VladislavAntonyuk whenever the version comes out with all the latest bits to make this work more stable I have a blogpost ready. The sample is already to be seen here, but note you will need to use the nightly feed for it to work right now: https://github.com/jfversluis/EmbeddedFontsSample

Does that help? Are you missing something from this?

[ahmetkocadogan]

@jfversluis i published the app as apk, and no difference. Fonts not working in android. Below, i attach screen images, android-aab, android-apk, and iphone, all real devices.

Android - APK

Android - AAB

iPhone

Font i use is Ubuntu.

I'll try when the next Xamarin.Forms release is available, and i'll update the issue.

[VladislavAntonyuk]

Thank you @jfversluis.
I tried a more complex scenario, if fonts and xaml are in different projects and it doesn't work(
EmbeddedFonts.zip

[jfversluis]

@ahmetkocadogan this might be related, could you try the suggestion in this comment: https://github.com/xamarin/Xamarin.Forms/issues/9900#issuecomment-606558093

[cklenk]

Do you still need to add the font name in the Info.plist UIAppFonts key for iOS?

[jfversluis]

@cklenk you do not :)

[noxe]

So this is not available in the latest 4.6.0 Pre Release 3 ?

[noxe]

Cannot get the working - also tried with latest 4.5.0.530. Tried my application and also the demo application from top -> App5.zip - no chance?

[jfversluis]

@noxe could you try this; https://github.com/jfversluis/EmbeddedFontsSample

[noxe]

Hmm - thank you - seems to work - will need to look where the difference now is. i see ExportFont is defined in App.xaml.cs - while i have it in AssemblyInfo.cs ?

[noxe]

Ok - i am getting closer - this works also in my application -

But this one not:

FontFamily="FontAwesome5Regular"
FontSize="24"
Text="{x:Static fontawesome:FontAwesomeIcons.Bars}">

///

/// fa-bars unicode value ("\uf0c9").
///
/// This icon supports the following styles: Light (Pro), Regular (Pro), Solid, Duotone (Pro)
///
/// See https://fontawesome.com/icons/bars
///

public const string Bars = "\uf0c9";

[noxe]

Sorry - the first line was the icon from the example

[noxe]

This does not work:

[VladislavAntonyuk]

@jfversluis did you make some changes with the font? When I try in your sample FontAwesome Brands or Font Awesome Solid on iOS, it doesn’t render the image

[jfversluis]

I did not make any changes to the fonts. If one of you could take that code from me, add the things that you don't see working and attach that here I'm happy to take a look.

[noxe]

I try to isolate currently - really seems to make a difference about FontSize. If i make FontSize 50 - i see the icons, if 24 not?

[noxe]

Take a look at the attached sample - very strange?
EmbeddedFontsSample-master.zip

[noxe]

i tested on iOS

[noxe]

[VladislavAntonyuk]

My attempt with multiple projects: https://github.com/xamarin/Xamarin.Forms/files/4411978/EmbeddedFonts.zip

[noxe]

@jfversluis could you repro?

[jjchiw]

It seems it doesn't work well with FontImageSource in iOS

I cloned https://github.com/jfversluis/EmbeddedFontsSample and just added the FontImageSource

[noxe]

no more updates here?

[jfversluis]

Hey everyone! Thanks for all the input! I do feel that this issue is getting a bit out of control and we are now describing all kind of issues which makes it hard to track.

@noxe I did see your project and I do see the same thing happening which is really weird. Anything above the size of 24 on iOS will show the question mark. I did verify that with another FontAwesome font that _doesn't_ happen. Can I ask you to open a new issue for this problem? If you're unable to, let me know, I will do it.

@VladislavAntonyuk Same for you. Could you maybe add that in a new issue and describe all the details there?

@jjchiw probably no surprise by this time... Would you be able to open a new issue describing this problem?

If you could fill out the bug report template and add a little reproduction project that would be amazing!

@ahmetkocadogan could you verify if your problem still exists in the latest 4.5.0.530 version? If so, please open a new issue with all the details and we will have a look.

Thank you all!

[jfversluis]

@dansiegel I pulled down your repro, added the latest 4.5.0.530 and fixed the FontAwesome filename <-> FontFamily attribute value and now it seems to work. I'll close this one for now, if you think otherwise please let me know I'll reopen or open a new issue. Thanks!

[dansiegel]

actually I was confused why it wasn't closed before... given @Clancey's PR for this issue, continued issues really should be tracked separately.

[zoli13]

I re-tested my above attached (Android only) sample with 4.5.0.530, and I can confirm it works.

[mohammedmsadiq]

https://www.linkedin.com/pulse/embedded-fonts-mohammed-m-sadiq

[mishtu123]

I m trying to use NewsSans-Black font and it’s not working for Android. Didnot check iOS

[jfversluis]

@mishtu123 please see if there is a relevant issue open already and if not open a new one with a reproduction project. Thanks!