Ngx-admin: how can i change Font-Face

[MHSoleimani]

**I'm submitting a

• [x] feature request

Expected behavior:
Hi,
how can i change Font-Face (CSS) for whole of app ?
i use Persian and English character together and i want to use fonts for them.

thanks in advance.

[MHSoleimani]

in /styles/theme.scss we have :

`$nb-themes: nb-register-theme((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
layout-content-width: 1400px,

font-main: Yekan,
font-secondary: Yekan,`

when font-main used and when font-secondary used ?

[yggg]

You can find where font-main and font-secondary used by searching for it in theme mappings file.

[MHSoleimani]

excellent ! thanks.

[DanialV]

You can find where font-main and font-secondary used by searching for it in theme mappings file.

Do you mean in order to change my app font I have to change it from _default.scss file inside nebular framework?

[Johnyoat]

@DanialV No, you need to overwrite the default config in your theme,.css or theme.css.

Sample code of how I change it to Roboto using google fonts.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$nb-themes: nb-register-theme((
  font-family-primary: unquote('Roboto, sans-serif'),
  font-family-secondary: font-family-primary,

), default, default);

[mcguegi]

@DanialV No, you need to overwrite the default config in your theme,.css or theme.css.

Sample code of how I change it to Roboto using google fonts.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$nb-themes: nb-register-theme((
  font-family-primary: unquote('Roboto, sans-serif'),
  font-family-secondary: font-family-primary,

), default, default);

I'm doing that for the corporate theme but it doesn't work. Could you help me? My themes.scss looks like this

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';
@import '~@nebular/theme/styles/themes/default';
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$nb-themes: nb-register-theme((
  font-family-primary: unquote('Roboto, sans-serif'),
  font-family-secondary: font-family-primary,
),corporate, default);

[Johnyoat]

@DanialV No, you need to overwrite the default config in your theme,.css or theme.css.
Sample code of how I change it to Roboto using google fonts.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$nb-themes: nb-register-theme((
  font-family-primary: unquote('Roboto, sans-serif'),
  font-family-secondary: font-family-primary,

), default, default);

I'm doing that for the corporate theme but it doesn't work. Could you help me? My themes.scss looks like this

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';
@import '~@nebular/theme/styles/themes/default';
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$nb-themes: nb-register-theme((
  font-family-primary: unquote('Roboto, sans-serif'),
  font-family-secondary: font-family-primary,
),corporate, default);

Sure @macaguegi The theme is misconfigured at the nb-register-theme and also you're importing multiple styles which makes it hard for the compiler to override.

Remove the the default style this -> @import '~@nebular/theme/styles/themes/default';

rewrite the nb-register-theme to

... ),defaulft,corporate);

so it should look like

@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$nb-themes: nb-register-theme((
  font-family-primary: unquote('Roboto, sans-serif'),
  font-family-secondary: font-family-primary,
),default, corporate);

[mcguegi]

Hey @Johnyoat ,thank u! it works. Have a nice day 😃

[Johnyoat]

Hey @Johnyoat ,thank u! it works. Have a nice day 😃

@macaguegi You're welcome. Good to know. You too!