NativeScript FontAwesome 5 free version overwrites regular font by solid font in iOS

Question

Trying to use the below font to show user icon using FontAwesome 5 in Nativescript, the user icon with regular view is loading correctly in Android.

But in iOS version the icon is overwritten with Solid font.

<Label class="page-icon far" text="&#xf007;"></Label>

when I try to remove the solid font from Fonts folder, it is working.

Answer 1

The problem is Font Awesome uses the SAME Family name for the Solid and Regular collections. The .ttf files differentiate collections based on Style, which is not supported in CSS.

The solution is to rename the Family of one of the collections - I choose solid.

I wrote an in depth blog post, but the gist is:

1. Copy .ttf files into your fonts dir
2. Use fontname.py (or similar tool) to rename the Family attribute:

python fontname.py "Font Awesome 5 Free Solid" fa-solid-900.ttf

You can then specify the following in your css:

.far {
    font-family: 'Font Awesome 5 Free', fa-regular-400;
}

.fab {
    font-family: 'Font Awesome 5 Brands', fa-brands-400;
}

.fas {
    font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}