{"id":109,"date":"2015-09-04T22:00:23","date_gmt":"2015-09-04T22:00:23","guid":{"rendered":"http:\/\/fluentreports.com\/blog\/?p=109"},"modified":"2016-01-02T05:07:28","modified_gmt":"2016-01-02T05:07:28","slug":"fonter-a-simple-nativescript-font-testing-application","status":"publish","type":"post","link":"http:\/\/fluentreports.com\/blog\/?p=109","title":{"rendered":"Fonter - A Simple NativeScript Font Application for iOS and Android"},"content":{"rendered":"

[[ A updated version of this post has been posted for NativeScript v1.5+ and icon fonts here<\/a>. ]]<\/p>\n

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.<\/p>\n

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

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

\"font-folder\"<\/a><\/p>\n

Second thing we need to do navigate to your app folder, and create a new \"fonts<\/strong>\" folder like so:<\/p>\n

This folder MUST be named the exactly \"fonts<\/strong>\", no upper case letters.\u00a0 It must be all lower case letters, exactly \"fonts<\/strong>\".<\/p>\n

 <\/p>\n

\"font-list\"<\/a><\/p>\n

The next thing we will do is copy the fonts you downloaded into your fonts folder.\u00a0\u00a0 In my case I downloaded Indie Flower<\/strong>, Josefin Sans<\/strong>, and Lobster<\/strong>.\u00a0 So my folder looks like this:
\nSo we have three fonts that we want to add to the CSS.\u00a0 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:
\n

\n.Lobster {\nfont-family: Lobster-Regular;\n}<\/code><\/pre><\/p>\n
.IndieFlower {
\nfont-family: IndieFlower;
\n}<\/p>\n
.JosefinSans {
\nfont-family: JosefinSans-Regular;
\n}<\/p>\n
You might notice; the font-family name is the EXACT SAME SPELLING<\/strong> and EXACT SAME CASE<\/strong> of each of the file names.\u00a0 The only thing that is removed is the .ttf<\/strong> extension.\u00a0\u00a0 This is REQUIRED <\/strong>for Android.\u00a0 Android will automatically load the file (with the .ttf) referenced in the font-family<\/strong> from the fonts folder.<\/p>\n
On iOS we have to do something slightly different; we have to register them before use.\u00a0 If you open up the app.js file, you need to add the following code to it, as you see just BEFORE <\/strong>the application.start().<\/p>\n
\nif (application.ios) {\nvar fontModule = require("ui\/styling\/font");\nfontModule.ios.registerFont("IndieFlower.ttf");\nfontModule.ios.registerFont("JosefinSans-Regular.ttf");\nfontModule.ios.registerFont("Lobster-Regular.ttf");\n}\napplication.start();\n<\/code><\/pre><\/p>\n
Again, you will notice the file name is spelled and cased exactly the same as the file name on in your fonts folder.\u00a0\u00a0 This is important!\u00a0\u00a0\u00a0 However you name the file; both the iOS registration and the android css declarations MUST be exactly the same.<\/p>\n
At this moment, the fonts are registered and usable on both iOS and Android.\u00a0\u00a0 So lets show them.\u00a0\u00a0 Open up your main-page.xml and here is the code I used:<\/p>\n
\n\n<label><\/label>\n<label><\/label>\n<label><\/label>\n\n<\/code><\/pre><\/p>\n
\"fonts-android\"<\/a>So now we want to try the code.\u00a0 tns run ios --emulator<\/strong> or tns run android --emulator<\/strong>.\u00a0 On Android everything should work perfectly and you should see something like this.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
Unfortunately on iOS it isn't as simple, when you run this project you will see that Lobster<\/strong> and Indie Flower<\/strong> work properly, but Josefin Sans<\/strong> is defaulting to the default font...<\/p>\n
\"font-titlebar-osx\"<\/a>Here is the \"small gotcha\" on iOS.\u00a0\u00a0 The font is registered under its actual font name, not under the file name.\u00a0\u00a0 So we have one more step you need to do; and you can do it in either OSX or Windows.\u00a0 Go to your fonts folder and double click on the JosefinSans-Regular.ttf<\/strong> and you should see a window like either of these (depending on your platform).\u00a0 Notice the part I highlighted in Red.\u00a0 That is the actual font name.\u00a0\u00a0 So, the last piece to this puzzle is you need re-open the app.css file and change the .JosefinSans class declaration to:\"font-titlebar-win\"<\/a><\/p>\n
.JosefinSans {
\nfont-family: JosefinSans-Regular,Josefin Sans;<\/b>
\n}<\/p>\n
Do you see what I added.\u00a0 I appended the actual font name to the font-family.\u00a0 The ORDER is important.\u00a0\u00a0 On Android because it does auto-registration of the fonts, it will load and register the FIRST<\/strong> font, and then it is happy.\u00a0\u00a0 On iOS it doesn't see the first font so it just ignores it and then sees the SECOND<\/strong> font and then it is happy.<\/p>\n
\"fonts-ios\"<\/a>So now when you do a tns run ios --emulator<\/strong> you should see this.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
You can download the complete project (including fonts) here: fonter.zip<\/a><\/p>\n
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.<\/p>\n
[[ A updated version of this post has been posted for NativeScript v1.5+ and icon fonts here<\/a>. ]]<\/p>\n","protected":false},"excerpt":{"rendered":"
[[ 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.\u00a0\u00a0\u00a0… Continue reading Fonter - A Simple NativeScript Font Application for iOS and Android<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=109"}],"version-history":[{"count":13,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":187,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/109\/revisions\/187"}],"wp:attachment":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}