Fonter - A Simple NativeScript Font Application for iOS and Android

[[ A updated version of this post has been posted for NativeScript v1.5+ and icon fonts here. ]]

Since the subject of Fonts has been causing issues for multiple people in the NativeScript community I figured I would write up a post on how to do it.

Attached to this post is the completed project.    First thing you need to do is a
tns create project fonter -- then cd fonter and tns platform add android or tns platform add ios.   Now your project is ready to go.  I deleted the app/main-page.js and the app/main-view-model.js in this sample app, since they are not needed.

Next thing we need are some fonts.   So I go to https://Google.com/fonts and look at several fonts and pick a couple fonts and download them.  (Please note you actually have to download the fonts from https://github.com/google/fonts)   To keep things simple, all three fonts are under the SIL Open Font License: http://scripts.sil.org/OFL

Second thing we need to do navigate to your app folder, and create a new "fonts" folder like so:

This folder MUST be named the exactly "fonts", no upper case letters.  It must be all lower case letters, exactly "fonts".

 

The next thing we will do is copy the fonts you downloaded into your fonts folder.   In my case I downloaded Indie Flower, Josefin Sans, and Lobster.  So my folder looks like this:
So we have three fonts that we want to add to the CSS.  In my case I want these fonts globally in the application so I will open up the app.css file; and add the three following changes:

.Lobster {
font-family: Lobster-Regular;
}

.IndieFlower {
font-family: IndieFlower;
}

.JosefinSans {
font-family: JosefinSans-Regular;
}

You might notice; the font-family name is the EXACT SAME SPELLING and EXACT SAME CASE of each of the file names.  The only thing that is removed is the .ttf extension.   This is REQUIRED for Android.  Android will automatically load the file (with the .ttf) referenced in the font-family from the fonts folder.

On iOS we have to do something slightly different; we have to register them before use.  If you open up the app.js file, you need to add the following code to it, as you see just BEFORE the application.start().

if (application.ios) {
var fontModule = require("ui/styling/font");
fontModule.ios.registerFont("IndieFlower.ttf");
fontModule.ios.registerFont("JosefinSans-Regular.ttf");
fontModule.ios.registerFont("Lobster-Regular.ttf");
}
application.start();

Again, you will notice the file name is spelled and cased exactly the same as the file name on in your fonts folder.   This is important!    However you name the file; both the iOS registration and the android css declarations MUST be exactly the same.

At this moment, the fonts are registered and usable on both iOS and Android.   So lets show them.   Open up your main-page.xml and here is the code I used:

<label></label>
<label></label>
<label></label>

So now we want to try the code.  tns run ios --emulator or tns run android --emulator.  On Android everything should work perfectly and you should see something like this.

 

 

 

Unfortunately on iOS it isn't as simple, when you run this project you will see that Lobster and Indie Flower work properly, but Josefin Sans is defaulting to the default font...

Here is the "small gotcha" on iOS.   The font is registered under its actual font name, not under the file name.   So we have one more step you need to do; and you can do it in either OSX or Windows.  Go to your fonts folder and double click on the JosefinSans-Regular.ttf and you should see a window like either of these (depending on your platform).  Notice the part I highlighted in Red.  That is the actual font name.   So, the last piece to this puzzle is you need re-open the app.css file and change the .JosefinSans class declaration to:

.JosefinSans {
font-family: JosefinSans-Regular,Josefin Sans;
}

Do you see what I added.  I appended the actual font name to the font-family.  The ORDER is important.   On Android because it does auto-registration of the fonts, it will load and register the FIRST font, and then it is happy.   On iOS it doesn't see the first font so it just ignores it and then sees the SECOND font and then it is happy.

So now when you do a tns run ios --emulator you should see this.

 

 

 

 

You can download the complete project (including fonts) here: fonter.zip

The fonts/fonts.json file is just the font information for the fonts from the google code project; I wanted to make sure the copyrights information was in the same folder as the fonts in case someone finds the sample elsewhere.

[[ A updated version of this post has been posted for NativeScript v1.5+ and icon fonts here. ]]