Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

FontAwesome in iOS doesn't work

EnricoRossiniEnricoRossini USMember ✭✭✭✭

In my app, I put the fonts in the main project and export the fonts from the AssemblyInfo.cs like:

[assembly: ExportFont("FontAwesome5BrandsRegular.otf", Alias = "FontAwesomeBrands")]
[assembly: ExportFont("FontAwesome5Solid.otf", Alias = "FontAwesomeSolid")]
[assembly: ExportFont("FontAwesome5Regular.otf", Alias = "FontAwesomeRegular")]

[assembly: ExportFont("InterMedium.ttf", Alias = "InterMedium")]

All fonts are working. I'm facing an issue only with FontAwesome in iOS. What I see on the iOS app is:

but in Android is working fine.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    What's the version of your Xamarin Forms?
    Embedded fonts only work on Forms 4.5.0.530 and newer:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/fonts#use-a-custom-font
    Did the sample in this documentation work properly?
    You could separately integrate the font in the iOS project and then follow this blog to complete the configuration on iOS:
    https://devblogs.microsoft.com/xamarin/custom-fonts-in-ios/

  • EnricoRossiniEnricoRossini USMember ✭✭✭✭

    Thank you @LandLu
    I'm using Xamarin Forms 4.5.6.657
    Yes I'm following this document https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/fonts#use-a-custom-font

    I understood embedded fonts are working cross platform and it is working for me with other fonts but not with FontAwesome. Is there a specific version I have to use?

    Thank you in advance

  • LandLuLandLu Member, Xamarin Team Xamurai

    Have you tried a .ttf file?
    I used to make it work use individual approaches with .otf file on iOS.
    If you still can't achieve it using embedded resource I suggest trying the second one.

  • EnricoRossiniEnricoRossini USMember ✭✭✭✭

    The real interesting thing is the embedded font is working for other fonts but not for FontAwesome.

    The text is in MontserratAlternates the question mark on the right is the wrong icon from FontAwesome

  • EnricoRossiniEnricoRossini USMember ✭✭✭✭

    OK, it is working now on the home page without any change. Apparently, the problem is inside a Xamarin.Forms.PancakeView

                <yummy:PancakeView Style="{StaticResource listOptionLayoutStyle}"
                                   HorizontalOptions="EndAndExpand"
                                   CornerRadius="5, 0, 5 ,0">
                    <yummy:PancakeView.Triggers>
                        <DataTrigger TargetType="yummy:PancakeView"
                                     Binding="{Binding ListLayout}"
                                     Value="{x:Static models:ListLayoutOptions.Big}">
                            <Setter Property="BackgroundColor"
                                    Value="{StaticResource primaryColor}"/>
                        </DataTrigger>
                    </yummy:PancakeView.Triggers>
                    <Label Text="{x:Static utils:FontAwesomeIcons.Envelope}"
                           Style="{StaticResource listOptionLayoutTextStyle}"
                           FontFamily="FontAwesomeSolid">
                        <Label.Triggers>
                            <DataTrigger TargetType="Label"
                                         Binding="{Binding ListLayout}"
                                         Value="{x:Static models:ListLayoutOptions.Big}">
                                <Setter Property="TextColor"
                                        Value="{DynamicResource background }"/>
                            </DataTrigger>
                        </Label.Triggers>
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ChangeLayoutCommand}"
                                                  CommandParameter="{x:Static models:ListLayoutOptions.Big}"/>
                        </Label.GestureRecognizers>
                    </Label>
                </yummy:PancakeView>
    

    With this code I display the following image:

    It is still displaying correctly for Android but some issue for iOS.

  • LandLuLandLu Member, Xamarin Team Xamurai

    Xamarin.Forms.PancakeView is not an official control here it's better to ask its author for the root cause.

  • EnricoRossiniEnricoRossini USMember ✭✭✭✭

    @LandLu said:
    Xamarin.Forms.PancakeView is not an official control here it's better to ask its author for the root cause.

    I know that. I only updated my thoughts

  • euangordoneuangordon Member

    @EnricoRossini I am facing a similar issue, but I am not using PancakeView. Font Awesome shows perfectly on Android, but not on iOS. On iOS it works on my main page and home page, but not on a ContentPage with ListView > DataTemplate.

    Did you ever find a solution?

  • JMERISEJMERISE Member ✭✭

    Hi all,

    @euangordon I have the same problem only under IOS 14 but when I launch the application under IOS 13 the icons are displayed correctly.

    Have you found a solution since then?

  • euangordoneuangordon Member
    edited October 9

    @JMERISE I did get it working, but it took me like 6 hours of hacking around. It is a couple of months ago but from my tweets at the time, this is what I did:

    "Everything was fine on Android but on iOS I could get it working on my main page, but not in a template. Finally, I moved over to use the new XF was to add the fonts as assets"

    There had been a new version of Xamarin Forms which changed the way assets/fonts could be loaded, so make sure you update to the latest version.

    Following on from that, I loaded up the EmbeddedFontsSample by jfversluis and went through it and made sure my code matched it exactly.

    I have not contributed on here long enough to add links, but it is github.com / jfversluis / EmbeddedFontsSample

    I hope this helps you.

  • JMERISEJMERISE Member ✭✭

    @euangordon Thanks for your feedback, your solution worked for a simple project with a single page. But on a much more important project I found another solution for icons using FontAwesome. I simply removed the fa-brands-400.ttf and fa-regular-400.ttf from the IOS info.plist, I think the two files are in conflict.

Sign In or Register to comment.