How do I set the font in a StaticResource?

Question

I'm trying to define the FontAwesome fontFamily in the App.xaml so I can use staticresource in my code.

Setting the fontFamily directly in the page is working. Problem is when I try to get this value from the StaticResource I have a blank page showing.

App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
             x:Class="RedPrairie.App">
    <Application.Resources>

        <!-- Application resource dictionary -->
        <ResourceDictionary>
            <!-- Font Awesome fonts path per plateform -->
            <OnPlatform x:Key="FontAwesomeBrands" x:TypeArguments="x:String"  Android="FontAwesome5Brands.otf#Font Awesome 5 Brands Regular"  iOS="Font Awesome 5 Free" />
            <OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String" Android="FontAwesome5Solid.otf#Font Awesome 5 Free Solid"  iOS="Font Awesome 5 Free" />
            <OnPlatform x:Key="FontAwesomeRegular" x:TypeArguments="x:String" Android="FontAwesome5Regular.otf#Font Awesome 5 Free Regular"  iOS="Font Awesome 5 Free" />
        </ResourceDictionary>
    </Application.Resources>
</prism:PrismApplication>

My Page:

            <Label Text="{x:Static model:Icon.far_user}" 
                    FontFamily="{StaticResource FontAwesomeRegular}"
                       FontSize="Large"
                       TextColor="SkyBlue"
                       VerticalOptions="Center">

            </Label>

working Page :

<Label Text="{x:Static model:Icon.far_user}" 
                       FontSize="Large"
                       TextColor="SkyBlue"
                       VerticalOptions="Center">
                <Label.FontFamily>
                    <OnPlatform 
                     x:TypeArguments="x:String"
                     Android="FontAwesome5Regular.otf#Font Awesome 5 Free Regular" 
                     iOS="Font Awesome 5 Free"  />
                                    </Label.FontFamily>

            </Label>

Another working Page :

<Label Text="&#xf007;" 
                       FontSize="Large"
                       TextColor="SkyBlue"
                       VerticalOptions="Center">
                <Label.FontFamily>
                    <OnPlatform 
                     x:TypeArguments="x:String"
                     Android="FontAwesome5Regular.otf#Font Awesome 5 Free Regular" 
                     iOS="Font Awesome 5 Free"  />
                                    </Label.FontFamily>

            </Label>

Content of class Icon :

  public static class Icon
    {
        /*Regular Icons - prefixed with FAR_*/

        public static string far_address_book = "\uf2b9";
        public static string far_address_card = "\uf2bb";
        public static string far_angry = "\uf556";
        public static string far_arrow_alt_circle_down = "\uf358";
        public static string far_arrow_alt_circle_left = "\uf359";
        public static string far_arrow_alt_circle_right = "\uf35a";
        public static string far_arrow_alt_circle_up = "\uf35b";
        public static string far_user = "\uf007";
...
}

What am I doing wrong here?

Answer 1

Simplify the font filename and use font names as shown below.

It seems that Android is not strict on the font name, however, if the font filename is incorrect a RuntimeException: 'Font asset not found ' is thrown.

On iOS, if the font filename is incorrect in the UIAppFonts array key in Info.plist, or the font name is incorrect, the glyph/text appears as a question mark within a frame.

On UWP, with an incorrect font filename or font family name, the glyph/text appears just as a frame.

Font file location and content type in project:

iOS: Font file location: Resources folder. Content type: BundleResource

Android: Font file location: Assets folder. Content type: AndroidAsset

UWP: Font file location: Assets folder. Content type: Content

ResourceDictionary:

  <OnPlatform x:TypeArguments="x:String" x:Key="FaRegular">
    <On Platform="iOS" Value="FontAwesome5Free-Regular" />
    <On Platform="Android" Value="FontAwesome5Regular.otf#Font Awesome Regular" />
    <On Platform="UWP" Value="Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
  </OnPlatform>

  <OnPlatform x:TypeArguments="x:String" x:Key="FaSolid">
    <On Platform="iOS" Value="FontAwesome5Free-Solid" />
    <On Platform="Android" Value="FontAwesome5Solid.otf#Font Awesome Solid" />
    <On Platform="UWP" Value="Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
  </OnPlatform>

  <OnPlatform x:TypeArguments="x:String" x:Key="FaBrands">
    <On Platform="iOS" Value="FontAwesome5Brands-Regular" />
    <On Platform="Android" Value="FontAwesome5Brands.otf#Font Awesome Brands" />
    <On Platform="UWP" Value="Assets/FontAwesome5 Brands.otf#Font Awesome 5 Brands" />
  </OnPlatform>

Example Label:

<Label Text="&#xf2b9;" TextColor="Accent" FontFamily="{StaticResource FaRegular}" />
<Label Text="&#xf641;" TextColor="Accent" FontFamily="{StaticResource FaSolid}" />    
<Label Text="&#xf26e;" TextColor="Accent" FontFamily="{StaticResource FaBrands}" />

For iOS add the following using Open With > XML editor in Info.plist:

<key>UIAppFonts</key>
<array>
<string>FontAwesome5Brands.otf</string>
<string>FontAwesome5Regular.otf</string>
<string>FontAwesome5Solid.otf</string>
</array>