Get Font Awesome 5+ working with NativeScript Angular mobile app

I really like Font Awesome, and I really like NativeScript. I’ve done some basic native app development before, and images outside of webviews are always a huge pain in the ass. You have to make 50 sizes for all the screen densities, it only png and jpg are supported, there are idiosyncrasies between iOS and Android, blah blah blah…. it is so bad, that there are tools devoted to taking a single image and creating all the variants. Yuck.

For things like Tab Navigation, I’ve typically been able to find icons I need in a web font – my go to is Font Awesome. Fonts, as you know, are vector based so there is no need to go through the rigamarole of making 1000 raster images.

Hooking up fonts to NativeScript

NativeScript has good support for Icon Fonts. The problem is, iOS and Android consume the fonts differently. Android looks at the css font-family defined in your CSS and needs the value to equal the file name of the font. iOS looks at the font-family css directive again, but it requires the value to equal the Family value INSIDE the .ttf font file.

For example, here are the .ttf files in my src/fonts NativeScript dir:

~: ls src/fonts/
fa-brands-400.ttf  fa-regular-400.ttf  fa-solid-900.ttf

I then add the following to my src/_app-common.scss:

.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;
}

This tells the native app to look up the family (works on iOS) and fall back to file name (works on Android).

The Problem

Easy enough right? Wrong. When you download Font Awesome the .ttf files for solid and regular use the SAME Family name. On macOS you can easily see this by opening the “Font Book” app, and importing the Font Awesome .ttf files. If you click on the font name, then the ‘i’ icon, you can see the value of Family:

Regular collection
Solid collection

It is a subtle difference, the Style value is different, but as you will see the Family value is exactly the same.

The CSS font-family directive has no way to specify the style of font.

The Solution

The solution I came up with, is to simply modify the Family name of the Solid collection .ttf file. All you need to do is:

  1. Install fontname.py command line utility
  2. Copy the FA .ttf files into your src/fonts/ directory and cd to this dir
  3. Run python fontname.py "Font Awesome 5 Free Solid" fa-solid-900.ttf
  4. Copy the CSS above to your src/_app-common.scss file

Thats it. You can then use it like this (Solid collection – fas):

<TabView androidTabsPosition="bottom" class="fas h2 m-x-auto" selectedTabTextColor="green">
    <page-router-outlet
        *tabItem="{title: ''}"
        name="browseTab">
    </page-router-outlet>
</TabView>

Or Regular collection (far):

<TabView androidTabsPosition="bottom" class="far h2 m-x-auto" selectedTabTextColor="green">
    <page-router-outlet
        *tabItem="{title: ''}"
        name="browseTab">
    </page-router-outlet>
</TabView>

Hope this helps!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s