{"id":176,"date":"2016-01-02T05:05:03","date_gmt":"2016-01-02T05:05:03","guid":{"rendered":"http:\/\/fluentreports.com\/blog\/?p=176"},"modified":"2020-03-01T07:23:48","modified_gmt":"2020-03-01T07:23:48","slug":"fonter-revisited-ios-android-nativescript-fonts","status":"publish","type":"post","link":"http:\/\/fluentreports.com\/blog\/?p=176","title":{"rendered":"Fonter - Revisited (iOS &#038; Android NativeScript Fonts)"},"content":{"rendered":"<p>In my prior <a href=\"http:\/\/fluentreports.com\/blog\/?p=109\">post<\/a> on fonter, I walked though how to use the text fonts.\u00a0 Several things have changed from that point in time; including iOS now auto-registers the fonts.\u00a0 So I want to revisit the information and cover what needs to happen with NativeScript 1.5.1 and newer.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Setup<br \/>\n<\/strong><\/span><a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/font-folder.png\" rel=\"attachment wp-att-177\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-177\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/font-folder-300x300.png\" alt=\"font-folder\" width=\"300\" height=\"300\" srcset=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/font-folder-300x300.png 300w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/font-folder-150x150.png 150w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/font-folder.png 341w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>The folder structure is still the same; you still have to create and use the <strong>fonts<\/strong> folder inside your <strong>app<\/strong> folder.\u00a0 All font files are placed in that folder.\u00a0 Remember this folder is a folder you will have to initially create as it is not created for you by NativeScript when it creates the project for you.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>CSS Rules<\/strong><\/span><br \/>\nIn the CSS rules, the first font declaration is the one you want to have auto-register.\u00a0 It is the filename of the actual file without the .ttf.\u00a0 So if the file name is called JosefinSans-Regular.ttf, then the CSS rule would be:<br \/>\n<pre>.JosefinSans {\n&nbsp;&nbsp;&nbsp;&nbsp;font-family:JosefinSans-Regular,Josefin Sans;\n}<\/pre><br \/>\nThe second declaration is the actual internal font name.\u00a0\u00a0 Android only needs the first declaration; on iOS you <em>might<\/em> need to have them both.\u00a0 In most cases iOS does appear now to be able to use the font filename; however I have found in some case it still requires the actual internal font name -- so I recommend you include both since it is simpler and you make sure it will work on iOS and Android.<\/p>\n<p>To figure out the internal font name for iOS the procedure is the same as I outlined before; double click on the font, and then look for the font name in the place I highlighted.<\/p>\n<p><a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2015\/09\/font-titlebar-win.png\" rel=\"attachment wp-att-118\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-118 alignnone\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2015\/09\/font-titlebar-win.png\" alt=\"font-titlebar-win\" width=\"343\" height=\"194\" \/><\/a><a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2015\/09\/font-titlebar-osx.png\" rel=\"attachment wp-att-117\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-117 alignnone\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2015\/09\/font-titlebar-osx-300x286.png\" alt=\"font-titlebar-osx\" width=\"201\" height=\"192\" srcset=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2015\/09\/font-titlebar-osx-300x286.png 300w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2015\/09\/font-titlebar-osx.png 399w\" sizes=\"auto, (max-width: 201px) 100vw, 201px\" \/><\/a><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Using Fonts<\/strong><\/span><br \/>\nThe key to using fonts is to use the class or cssclass in the Declaritive XML; so a Label then has attache &lt;Label text=\"Cool Text\" class=\"JosefinSans\"\/&gt; would cause the <em>.JosefinSans<\/em> css rule to be applied to this Label. Which would mean the \"Cool Text\" would use the Josefin Sans font since that is what we put in the .JosefinSans css rule above.\u00a0 This the same for all types of fonts, you create the CSS rule with a font-family and then apply it to the Declarative UI element with the cssclass\/class on it.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Using Icon Fonts<\/strong><\/span><br \/>\nThe new version of Fonter includes not only the three standard text fonts; but I also include three different icon fonts.<\/p>\n<ul>\n<li>Google's Material Design<\/li>\n<li>Fontastic<\/li>\n<li>Material-Design-Iconic<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><strong>Using Google Material Design Fonts<\/strong><\/span><br \/>\nLets tackle Google's Material Design first, the thing you need to do is go to to the Material Design <a href=\"https:\/\/design.google.com\/icons\/\" target=\"_blank\" rel=\"noopener noreferrer\">website<\/a>. On this website you can look through the different icons.\u00a0 So in the second row of icons you should see a picture of the android.\u00a0 Click on it and you will see at the bottom of the screen a blue bar appear.<\/p>\n<p><a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google.png\" rel=\"attachment wp-att-179\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-179\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google-300x117.png\" alt=\"Google\" width=\"621\" height=\"242\" srcset=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google-300x117.png 300w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google-768x298.png 768w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google-1024x398.png 1024w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google-624x243.png 624w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Google.png 1320w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/a>Once the blue bar appears; click the bottom right corner (highlighted in red) where it says <strong>Icon Font<\/strong>.\u00a0 It will popup a bit more and show the entire grey screen, and you should see towards the bottom of the screen some text that I highlighed in blue that looks like this: &lt;i class=\"material-icons\"&gt;<strong>&amp;#xE859;<\/strong>&lt;\/i&gt;.\u00a0\u00a0 You see the bolded value?\u00a0\u00a0 That is what you need to copy to use this icon in your nativescript application.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Fontawesome<\/strong><\/span><br \/>\nNow we need to go to the Fontawesome <a href=\"https:\/\/fortawesome.github.io\/Font-Awesome\/cheatsheet\/\" target=\"_blank\" rel=\"noopener noreferrer\">website<\/a>.\u00a0 In this case it is much simpler, scroll the cheatsheet until you find the icon you want to use.\u00a0 Then copy the &amp;#x.... number.\u00a0 For example at the top the fa-500px icon would be <strong>&amp;#<span class=\"text-muted\">xf26e<\/span>;.\u00a0<\/strong>Pretty simple to find on Fontawesome's site.<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Material-Design-Iconic<\/strong><\/span><br \/>\n<a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/GMD.png\" rel=\"attachment wp-att-180\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-180\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/GMD-300x176.png\" alt=\"GMD\" width=\"300\" height=\"176\" srcset=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/GMD-300x176.png 300w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/GMD-768x451.png 768w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/GMD-624x367.png 624w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/GMD.png 909w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>The final site we need to go to is the Material Design Iconic <a href=\"http:\/\/zavoloklom.github.io\/material-design-iconic-font\/icons.html\" target=\"_blank\" rel=\"noopener noreferrer\">website<\/a>.\u00a0 Just like the Google site; you need to click on the icon to see the code.\u00a0 So find the icon you want and click on it.\u00a0 And you should see something like this.<\/p>\n<p>The text highlighted in red is the important information.\u00a0 For this icon is say <strong>f33b.<\/strong> You prefix that with the &amp;#x and append a semicolon so it will be <strong>&amp;#xf33b;<\/strong>.\u00a0 And that gives you the code for Google-Material-Iconic<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Using the Codes<\/strong><\/span><br \/>\nAs you can see all three codes use the same format; NativeScript can use the html entity codes inside the XML to display the characters.\u00a0\u00a0 So as an example I am going to show you how I use the FontAwesom font; My XML is:<\/p>\n<p>&lt;Label android:text=\" &amp;#xf17b; \" ios:text=\" &amp;#xf179; \" cssClass=\"FontAwesome\"\/&gt;<\/p>\n<p>As you might notice, on Android I am showing the Android picture, on iOS I'm showing the Apple logo.\u00a0\u00a0 My app.css is this:<br \/>\n<pre>.FontAwesome {\n&nbsp;&nbsp;&nbsp;&nbsp;font-family: FontAwesome;\n}<\/pre><br \/>\nThat is all that is required to make it work.\u00a0 Proper <strong>CSS<\/strong>, <strong>XML<\/strong>, and finally the font in the <strong>app\/fonts<\/strong> folder.<\/p>\n<p>Now their is one other thing that also gets frequently asked, is how do you do the same things from JavaScript like for a bound control.\u00a0 Well first you still need a control that has the proper CSS applied to it. \u00a0 To assign a icon character from JavaScript can be done one of two ways.<\/p>\n<p>Option 1:<br \/>\nvar myChar = \"\\uf33b\";<\/p>\n<p>Option 2:<br \/>\nvar myChar = String.fromCharCode(parseInt('f33b', 16));<\/p>\n<p>In Javascript you can use \\uXXXX where the XXXX is the 4 hex characters after the &amp;#x, the \\u acts in JavaScript just like the &amp;#x does in XML.\u00a0 The other options is to use the String.fromCharCode(parseInt('XXXX',16)) and use the same XXXX as the \\u would require.\u00a0 We have to convert the String hexadecimal values into an integer value for this to work.\u00a0 However if you manually convert it yourself, then you can eliminate the parseInt() code.\u00a0\u00a0 So in this case 0xf33b = 62267, so you can do var <em>myChar = String.fromCharCode(62267);<\/em><\/p>\n<p><a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android.png\" rel=\"attachment wp-att-181\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-181 alignright\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android-169x300.png\" alt=\"fonter-android\" width=\"169\" height=\"300\" srcset=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android-169x300.png 169w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android-768x1365.png 768w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android-576x1024.png 576w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android-624x1109.png 624w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/fonter-android.png 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a>You can download the full demo application <a href=\"https:\/\/github.com\/NathanaelA\/fonter\">fonter<\/a>, which has all 6 fonts, all the css and the xml used to display properly on iOS and Android.<\/p>\n<p>Please note; this REQUIRES the latest tns-core-modules; 1.5.1 on iOS and v1.5.0 or greater on Android.\u00a0\u00a0 If you are using an earlier version of the core modules then you should read my prior fonter post from how you need to setup the iOS registration.<\/p>\n<p>If you have any other ideas for blog posts; feel free to comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my prior post on fonter, I walked though how to use the text fonts.\u00a0 Several things have changed from that point in time; including iOS now auto-registers the fonts.\u00a0 So I want to revisit the information and cover what needs to happen with NativeScript 1.5.1 and newer. Setup The folder structure is still the&hellip; <a class=\"more-link\" href=\"http:\/\/fluentreports.com\/blog\/?p=176\">Continue reading <span class=\"screen-reader-text\">Fonter - Revisited (iOS &#038; Android NativeScript Fonts)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[15],"tags":[33,32,16],"class_list":["post-176","post","type-post","status-publish","format-standard","hentry","category-nativescript","tag-fonter","tag-fonts","tag-nativescript","entry"],"_links":{"self":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/176","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=176"}],"version-history":[{"count":6,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions"}],"predecessor-version":[{"id":1168,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/176\/revisions\/1168"}],"wp:attachment":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=176"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}