2

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"
      }
    }
Vladimir J
  • 81
  • 1
  • 6

5 Answers5

1

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.

Vladimir J
  • 81
  • 1
  • 6
  • Hi Vladimir, did you do anything else? I am trying to do the same with both font awesome and a google font. None of them seem to get picked up in my Code sharing app. For now i am only testing IOS builds. Is there a way to debug this? – Guardian Nov 15 '18 at 21:24
  • Placing `fonts/` in `src/` solved my problem. Other than that, make sure that you use **font name** for iOS and file name for Android in your CSS, in case of Roboto for example `* { font-family: 'Roboto-Regular', 'Roboto Regular', 'Roboto'; }` – Vladimir J Nov 16 '18 at 12:17
  • Thanks for ur reply Vladimir. I finally found it. You NEED the 3 items in the font-family definition apparently. font-family: 'FontAwesome', 'Font Awesome 5 Free Regular', 'Font Awesome 5 Free'; – Guardian Nov 16 '18 at 17:08
  • When i prepare build using XCODE I get this error "You don’t have permission to save the file “fonts” in the folder " any idea? I put fonts folder as src/fonts – Md. Nahiduzzaman Rose Jun 23 '20 at 12:42
0

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);
}
Ian MacDonald
  • 13,472
  • 2
  • 30
  • 51
  • Hi, thanks for answering. I know it's not standard, should have mentioned that. I did put Roboto-Regular.ttf file in `src/app/fonts`, and it works fine in web app and Android app (with appropriate font-family), but it fails to apply in iOS. I updated my question to include file path where the file is, since that might have something to do with it. In standard {N} it goes to `app/fonts/` and when using nativescript-schematics app folder is located inside `src/`. – Vladimir J Oct 05 '18 at 15:50
  • I am using a custom font in my app, which I have included in `app/fonts`. It loads on both iOS and Android from this location. I recommend checking to see how Roboto appears in the output from the snippet I posted above. As a quick-and-dirty solution, you can edit that into the `main.m` file in the generated project, then build and run through Xcode just to get the result. – Ian MacDonald Oct 05 '18 at 16:32
0

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

.roboto {
  font-family: 'Roboto-Regular';
}
Manoj
  • 21,753
  • 3
  • 20
  • 41
0

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");
    }
});
William Juan
  • 1,395
  • 1
  • 7
  • 10
  • 1
    You don't have to do that as long you keep your files inside fonts folder, those will be registered by default (https://github.com/NativeScript/NativeScript/blob/05c2460fc4989dae4d7fa1ee52f6d54e0c3113f5/tns-core-modules/ui/styling/font.ios.ts#L225). – Manoj Oct 06 '18 at 03:10
0

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>
D C
  • 708
  • 1
  • 6
  • 17
  • Hi, I've read (currently waiting for Android phone to test it), that you should do it like this `font-family: 'Roboto-Regular', 'Roboto Regular';` since Android wants to know file name and iOS font name. – Vladimir J Oct 06 '18 at 12:02