Ngx-admin: Use custom font

[andreismeada]

Issue type

I'm submitting a ...

• [ ] bug report
• [x] feature request
• [ ] question about the decisions made in the repository

Issue description

Hi, everyone. I'm trying to use a custom font in ngx-admin, but I don't seem to succeed. I have the font files in a folder, how should I proceed to use them ? I tried using _font-main: url (...)_ , but it did not work that way.

Other information:

npm, node, OS, Browser
```

MacOS Sierra 10.12.6
Chrome Browser

npm: 3.10.10
Angular CLI: 1.7.1
Node: 6.11.1
OS: darwin x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

[dedpnd]

@andreismeada
Try this.
I downloaded and put the fonts here ./assets/fonts/Exo2
In folder fonts add fonts.scss:

@font-face {
  font-family: "Exo2";
  src : url("/assets/fonts/Exo2/Exo2-Regular.ttf");
}

Edit .\src\app\@theme\styles\themes.scss:

// imoprt custom font
@import '../../../assets/fonts/fonts.scss';

// which themes you what to enable (empty to enable all)
$nb-enabled-themes: (default);
$nb-themes: nb-register-theme(( 
    // app wise variables for each theme
    sidebar-header-gap: 1rem, 
    sidebar-header-height: initial,
    layout-content-width: 1400px, 
    font-main: Roboto, 
        // Enable font this
    font-secondary: Exo2, 
    ), default, default);

Also I think you can do it through angular.json

[abdolhosein]

@andreismeada
Try this.
I downloaded and put the fonts here ./assets/fonts/Exo2
In folder fonts add fonts.scss:

@font-face {
  font-family: "Exo2";
  src : url("/assets/fonts/Exo2/Exo2-Regular.ttf");
}

Edit .\src\app\@theme\styles\themes.scss:

// imoprt custom font
@import '../../../assets/fonts/fonts.scss';

// which themes you what to enable (empty to enable all)
$nb-enabled-themes: (default);
$nb-themes: nb-register-theme(( 
  // app wise variables for each theme
  sidebar-header-gap: 1rem, 
  sidebar-header-height: initial,
  layout-content-width: 1400px, 
  font-main: Roboto, 
        // Enable font this
  font-secondary: Exo2, 
  ), default, default);

Also I think you can do it through angular.json

I've tried by 'font-main' and 'font-secondary' and it doesn't work!

after some tries and code reviews found that applicable ones are 'font-family-primary' and 'font-family-secondary' and these worked for me!

At all, your solution was so helpful for me, thanks a lot