Nativescript/Angular: Custom fonts not applied in iOS

2
votes

I am building a Nativescript Angular app with code sharing (TNS Code Sharing). Trying to apply Roboto Regular font, but it seems it's not working. I've seen that there are tons of questions about iOS and custom fonts out there, but none of given answers solves my problem, so I guess it has something to do with the fact that I'm using @nativescript/schematics (code sharing) setup.

If I use file name instead of font name, it works fine on Android, but whatever I specify as font-family, it never works on iOS.

Thanks folks.

Here's the code:

Font file location: src/app/fonts/Roboto-Regular.ttf

src/_app-common.scss

.roboto {
  font-family: 'Roboto Regular';
}

src/app/pages/my/my.component.tns.html

<Label [nsRouterLink]="['/about']" text="About" class="h1 text-center roboto" textWrap="true"></Label>

package.json

{
      "name": "appname",
      "nativescript": {
        "id": "no.app.id",
        "tns-android": {
          "version": "4.2.0"
        },
        "tns-ios": {
          "version": "4.2.0"
        }
      },
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "android": "tns run android --bundle",
        "ios": "tns run ios --bundle"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~6.1.0",
        "@angular/common": "~6.1.0",
        "@angular/compiler": "~6.1.0",
        "@angular/core": "~6.1.0",
        "@angular/forms": "~6.1.0",
        "@angular/http": "~6.1.0",
        "@angular/platform-browser": "~6.1.0",
        "@angular/platform-browser-dynamic": "~6.1.0",
        "@angular/router": "~6.1.0",
        "core-js": "^2.5.4",
        "nativescript-angular": "~6.1.0",
        "nativescript-theme-core": "~1.0.4",
        "normalize.css": "^8.0.0",
        "reflect-metadata": "~0.1.8",
        "rxjs": "^6.0.0",
        "tns-core-modules": "~4.2.0",
        "zone.js": "^0.8.26"
      },
      "devDependencies": {
        "@angular/cli": "^6.2.0",
        "@angular/compiler-cli": "~6.0.3",
        "@angular-devkit/build-angular": "^0.8.0",
        "@nativescript/schematics": "~0.3.0",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "nativescript-dev-typescript": "~0.7.0",
        "nativescript-dev-webpack": "^0.16.0",
        "protractor": "~5.3.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1",
        "typescript": "~2.7.2",
        "nativescript-dev-sass": "~1.6.0"
      }
    }
5
nativescriptnativescript-angular

5 Answers

1
votes

I've figured it out.

When you create your project with nativescript-schematics (mobile and web code sharing) with ng new --collection=@nativescript/schematics my-shared-app --shared the folder structure is little bit different than in standard nativescript application. In nativescript app you have app/ inside the root, and here you get src/app/. In this case, placing custom fonts in src/app/fonts/ worked for Android but not for iOS. When I moved them to src/fonts/ iOS picked them up too. Not sure if this works now on Android too, it would be dumb to have them doubled or symlinked, but I will check it out as soon as I test it on Android.

Thanks all.

0
votes

Roboto is not a standard iOS font, so if you haven't included the Roboto font in your fonts/ directory, it won't be available on iOS.

To determine which fonts are available on your iPhone (and what the names are that you should be addressing them by), see this answer to another StackOverflow question (relevant source copied below).

NSArray *fontFamilies = [UIFont familyNames];

for (int i = 0; i < [fontFamilies count]; i++)
{
    NSString *fontFamily = [fontFamilies objectAtIndex:i];
    NSArray *fontNames = [UIFont fontNamesForFamilyName:[fontFamilies objectAtIndex:i]];
    NSLog (@"%@: %@", fontFamily, fontNames);
}
0
votes

The postscript name of the font seems to be Roboto-Regular, so Try this,

.roboto {
  font-family: 'Roboto-Regular';
}
0
votes

You might need to register the font on your main.ts launch event

app.on(app.launchEvent, function (args: app.ApplicationEventData) {
    ...
    if (isIOS) {
      var fontModule = require("ui/styling/font");
      fontModule.ios.registerFont("Roboto-Regular.ttf");
    }
});
0
votes

seems your file location is : src/app/fonts/Roboto-Regular.ttf

app.css font-family should be same as file name : 

.roboto {
  font-family: 'Roboto-Regular';
}

add class in html file like this

<Label text="About" class="roboto" ></Label>