Font

API Reference: UI.Font

Font is used to assign text properties to UI objects. The font property is a shorthand for font-style, font-size and font-family .

TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
import Font = require('sf-core/ui/font');
import Label = require('sf-core/ui/label');
import TextAlignment = require('sf-core/ui/textalignment');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myLabel: Label;
myLabel2: Label;
myLabel3: Label;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = System.OS === "Android" ? this : this.parentController;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
console.log(" flexdirection " + this.layout.flexDirection);
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myLabel = new Label({
text: "SFProDisplay Medium "
});
this.layout.addChild(this.myLabel, "myLabel", ".sf-label", {
width: 250,
height: 60,
marginBottom: 10,
textAlignment: "MIDCENTER",
textColor: "#000000",
font: {
size: 16,
family: "SFProDisplay",
style: "Medium"
}
});
this.myLabel2 = new Label({
text: "SFProText Semibold"
});
this.layout.addChild(this.myLabel2, "myLabel2", ".sf-label", {
width: 250,
height: 60,
marginBottom: 10,
textAlignment: "MIDCENTER",
textColor: "#000000",
font: {
size: 16,
family: "SFProText",
style: "Semibold"
}
});
this.myLabel3 = new Label({
text: "SFProText Regular"
});
this.layout.addChild(this.myLabel3, "myLabel3", ".sf-label", {
width: 250,
height: 60,
textAlignment: "MIDCENTER",
textColor: "#000000",
font: {
size: 16,
family: "SFProText",
style: "Regular"
}
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: "COLUMN",
}
}
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Font = require('sf-core/ui/font');
const Label = require('sf-core/ui/label');
const FlexLayout = require('sf-core/ui/flexlayout');
const TextAlignment = require('sf-core/ui/textalignment');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myLabel = new Label({
width: 250,
height: 60,
marginBottom: 10,
textAlignment: TextAlignment.MIDCENTER,
font: Font.create("Verdana-Regular", 16),
text: "Verdana Regular "
});
this.layout.addChild(myLabel);
var myLabel2 = new Label({
width: 250,
height: 60,
marginBottom: 10,
textAlignment: TextAlignment.MIDCENTER,
font: Font.create("TimesNewRomanPS-BoldMT", 16),
text: "TimesNewRomanPS Bold "
});
this.layout.addChild(myLabel2);
var myLabel4 = new Label({
width: 250,
height: 60,
textAlignment: TextAlignment.MIDCENTER,
font: Font.create("Arial-ItalicMT", 15),
text: "Arial Italic"
});
this.layout.addChild(myLabel4);
}
);
module.exports = Page1;

The "Default" Font

Android & iOS systems are using different fonts by default.

  • iOS uses San Francisco font by default

  • Android uses Roboto as the default font There is an option to state "use the default font". Which means, use San Francisco on iOS and use Roboto on Android.

Wrapping Contents

A component that has a text property such as Label can have dynamic width & height regarding the text & font properties.

How to Install Custom Fonts?

Installing custom fonts is quick and easy.

Font Format

Only TrueType Fonts (ttf) are supported

Steps to add font

  1. Get the full font name from the system

Mac - Double click on the font file

Mac Font Name & Weight
Windows Font Name & Weight

  1. Create a folder for the font name. Remove all space characters

  2. Rename your font file based on the FontName-FontWeight.ttf pattern; Remove all of the space characters

  3. Upload your font files with drag & drop into font folder that you have just created.

iOS Font Name Issues

Some font names can cause problems with iOS. As you can see in the picture above, some font names do not match the pattern. It is commonly seen with the fonts Foundry name within. If this is happening, try with the pattern as seen in the picture above.

iOS Installed Font Names

On iOS, font name that system recognizes must have the folder name and font name. Otherwise related text won't have desired font family. You can get all font names by running the following code.

The code below will give the font names installed in the App & the System (iOS only).

TypeScript
JavaScript
TypeScript
import Font = require('sf-core/ui/font');
let fontNames = Font.ios.allFontNames();
for (const index in fontNames) {
console.log(fontNames[index]);
}
JavaScript
const Font = require('sf-core/ui/font');
var fontNames = Font.ios.allFontNames();
for (var index in fontNames) {
console.log(fontNames[index]);
}

Using Fonts Remotely

It is possible to download a font file from url and using this font for all Views. To create this font from a file, path is must be known with getAbsolutePath().

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
import Font = require('sf-core/ui/font');
import Label = require('sf-core/ui/label');
import Button = require("sf-core/ui/button");
import TextView = require('sf-core/ui/textview');
import TextBox = require('sf-core/ui/textbox');
import Http = require("sf-core/net/http");
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myLabel: Label;
myButton: Button;
myTextview: TextView;
myTextBox: TextBox;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = System.OS === "Android" ? this : this.parentController;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
var sessionManager = new Http();
sessionManager.requestFile({
url: "https://smartfacecdn.blob.core.windows.net/common/Windsong.ttf",
fileName: "Windsong.ttf",
onLoad: (e): void => {
var file = e.file;
if (file.exists) {
console.log("file exists.");
}
console.log("Moving...");
console.log("e.file.fullPath: " + e.file.getAbsolutePath());
this.myLabel.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
this.myButton.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
this.myTextview.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
this.myTextBox.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
},
onError: function (e: any) {
console.log("Something Wrong", e);
}
});
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myLabel = new Label({
text: "Label"
});
this.myButton = new Button({
text: "Button"
});
this.myTextview = new TextView({
text: "TextView"
});
this.myTextBox = new TextBox({
text: "TextBox"
});
this.layout.addChild(this.myTextBox, "myTextBox", ".sf-textBox", {
height: 60,
width: 100,
borderWidth: 0.5,
marginBottom: 10,
textAlignment: "MIDCENTER",
});
this.layout.addChild(this.myLabel, "myLabel", ".sf-label", {
width: 150,
height: 60,
marginBottom: 10,
textAlignment: "MIDCENTER",
});
this.layout.addChild(this.myButton, "myButton", "sf-button", {
width: 150,
height: 60,
marginBottom: 10,
});
this.layout.addChild(this.myTextview, "myTextView", ".sf-textView", {
height: 60,
width: 150,
textAlignment: "MIDCENTER",
marginBottom: 10
});
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: "COLUMN",
}
}
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Http = require("sf-core/net/http");
const Font = require('sf-core/ui/font');
const Label = require('sf-core/ui/label');
const TextAlignment = require('sf-core/ui/textalignment');
const Path = require('sf-core/io/path');
const Button = require("sf-core/ui/button");
const TextView = require('sf-core/ui/textview');
const TextBox = require('sf-core/ui/textbox');
var PageHttp = extend(Page)(
function PageHttp(_super) {
_super(this, {
onLoad: function() {
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myLabel = new Label({
width: 150,
height: 60,
marginBottom: 10,
textAlignment: TextAlignment.MIDCENTER,
text: "Label"
});
var myButton = new Button({
width: 150,
height: 60,
text: "Button",
marginBottom: 10,
});
var myTextview = new TextView({
text: "TextView",
height: 60,
width: 150,
textAlignment: TextAlignment.MIDCENTER,
marginBottom: 10,
});
var myTextBox = new TextBox({
height: 60,
width: 100,
text: "TextBox",
borderWidth: 0.5,
marginBottom: 10,
textAlignment: TextAlignment.MIDCENTER,
});
this.layout.addChild(myTextBox);
this.layout.addChild(myLabel);
this.layout.addChild(myButton);
this.layout.addChild(myTextview);
this.myLabel = myLabel;
this.myButton = myButton;
this.myTextview = myTextview;
this.myTextBox = myTextBox;
var destinationFont = Font.createFromFile(Path.DataDirectory + "/Windsong.ttf", 16);
if (destinationFont) {
myLabel.font = destinationFont;
myButton.font = destinationFont;
myTextview.font = destinationFont;
myTextBox.font = destinationFont;
}
},
onShow: function() {
Application.statusBar.visible = false;
this.headerBar.visible = false;
const page = this;
var sessionManager = new Http();
sessionManager.requestFile({
url: "https://smartfacecdn.blob.core.windows.net/common/Windsong.ttf",
fileName: "Windsong.ttf",
onLoad: function(e) {
var file = e.file;
if (file.exists) {
console.log("file exists.");
}
console.log("Moving...");
console.log("e.file.fullPath: " + e.file.getAbsolutePath());
page.myLabel.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
page.myButton.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
page.myTextview.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
page.myTextBox.font = Font.createFromFile(e.file.getAbsolutePath(), 16);
},
onError: function(e) {
console.log("Something Wrong");
}
});
}
});
}
);
module.exports = PageHttp;

Using System Fonts

In order to use the system fonts (The ones that are shipped by the system, not bundled within the app) it is possible to use with code. UI editor does not support unknown font names, which are not added to the project. While creating the font using create(fontName,size) that might work on the system that you are testing, but might not work with another. In that case, the system will assign a different font.

What are the Icon Fonts?

Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. Smartface UI Editor & Framework make it possible to use icon fonts within your project.

Custom fonts can be added under config/Fonts folder.

Font Awesome

If you don't have Font Awesome installed on your workspace, please perform following steps:

  • Download FontAwesome package from here

  • Upload related .ttf file under config/Fonts/FontAwesome and rename it as FontAwesome.ttf

  • After properties panel recognizes your new font, it will show up as a new option on font family selection

  • Create a component that has an input

  • Choose FontAwesome as font family from properties panel

  • Decide which character to show from here

  • Click related area to copy the icon and then paste it into your component

Ico Moon

Ico Moon provides icon management tool and icon libraries. It has a free version as well. To try it, please perform following steps:

  • Upload IcoMoon-Free.ttf to config/Fonts/IcoMoon-Free

  • For free icons visit here

  • Select an icon then click Generate Font

  • Click Get Code and then copy character

  • Then you can use it anywhere

Typing Special Characters

It is possible to paste special characters into UI editor or Code editor. They will just work fine. Those special characters are created via Unicode characters. In JavaScript Unicode characters are written with escaped code, such as: "\u1234"; backslash + lowercase u + 4 digit hexadecimal Unicode number.

Formatting the code with unicode characters

When the code is formatted, the code editor might convert \u1234 format Unicode character into a single "square". There is no loss of the code, it is just converted

Safari Browser & Unicode

Safari browser is known to "not to show" those characters on screen

Steps to type a Unicode character

  1. Get the Unicode number, such as https://fontawesome.com/icons/address-book?style=regular --> f2b9

  2. On the Smartface IDE go to the immediate panel

  3. Make sure that immediate panel is on "Browser mode"

4. Write a JavaScript code that prints the result of the Unicode letter

JavaScript
JavaScript
"\uf2b9"

5. That will print a "square" there. Copy that square

6. Paste that square into the text value of the component (such as a label). Make sure that you have selected the appropriate font to display the character