customize the PrimeNG Freya font family

[soluxionisrl]

Hello from Italy.
I'm tring to customize the PrimeNG Freya template.
I need to change the text font family whit an embedded folder font (the font family is Titillium web)
but I can't find on where the "$fontFamily" variable is declared.
The source must be a internal folder ( exemple : asset/font/titillium web/titillium-web.eot ).
I tried to override the @font-face on the _layout_variables.scss (the file suggested to use on the documentation (
"Customizing Styles
It is suggested to add your customizations in the following sass files under the "sass/overrides" folder instead of adding them to the scss files under sass folder to avoid maintenance issues after an update.
_layout_variables: Variables of the layout.
_layout_styles: Styles for the layout.
_theme_variables: Variables of the theme.
_theme_styles: Styles for the theme.")

but nothing happened, why? Would you help me please?
And also, Where can I find other example/documentation about PrimeNG Freya template) I can't belive that thre's just the "documentation" page....

thanks
best regards

[gucal]

Hi,

Defining the $fontFamily value is done in the _theme_light.scss and _theme_dark.scss files.

src > assets > sass > variables > theme > _light_dark.scss
or
src > assets > sass > variables > theme > _theme_dark.scss

Best Regards

[soluxionisrl]

Hello.
How suggested in documentation's template I created my custom theme and layout
On "index.html" my link are
<link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/poa/theme-light.css">
<link id="layout-css" rel="stylesheet" type="text/css" href="assets/layout/css/layout-poa-light.css">
I started to customize the template on the "theme-light.scss" file and in the layout-poa-light.scss (... I've changed the font $fontFamily here).
Now I need to change the $topbarBgColor, and of course I DON'T want to overrde the value on the _topbar_light.scss file, but I want to override the $topbarBgColor on my custom theme and layout (I mean on my "theme-light.scss" or layout-poa-light.scss.
How can I do?
Thakyou
best regards

[gucal]

You can do this just as you did when applying $font-family. You can include conditionally required variables.

Also, FreyaNG got a new update. If you wish, you can review and use the new version.
https://primefaces.org/freya-ng/#/

Best Regards!