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!

[Meruxxx]

`@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);` I have problems doing it, it does not recognize the $

[amsun10]

anyone know how to use a local font instead of Google fonts, I have a networking issue with the google fonts