How to change app Font Family

Hello Radzen Team!

If I want to replace the orginal font with Inter font in my app, what must be done?

1 Like

Hi @kim,

You might need to register your custom font in server\wwwroot\assets\css\styles.css.

2 Likes

How to prevent Radzen from removing the @font-face declaration in {style}.css?

Radzen does not remove anything from styles.css as it is generated only once.

I'm sorry, I didn't mean the styles.css file, but the default.css and other themes from Radzen.

Have you tried adding them to the code generation ignore list?

That was the first thing I tried, however Radzen replaces it with the original file when saving the Application Settings.

Indeed, I reproduced that and we will have to fix it. Just to remind you though that if you ignore the theme css file you will no longer be able to use the theme editor as the changes won't be saved.

This thread is resolved. My main goal was to use a custom font, as mentioned in the first post. Here's how I got it:


Then I registered the custom font using @font-face in the default.css file, like so:

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src: local("Inter"), local("Inter-Regular"), url("../fonts/Inter.ttf") format("tff");
}
1 Like

Kudos! That's what @enchev suggested. I thought you also wanted to delete the existing font declarations from the theme css file.

1 Like

Alright, thanks for this.
I wanted to point out that the security pages are also not considered in the ignore list.
image

Even tough I'm using Default Security, the page names are all different than the default's. And I have to delete them before launching to production.

Hi @kim,

I've tried to replicate this however both full path and wildcard worked for me:


If I have these pages in the ignore list I can add some code and Radzen will not overwrite it on run. If I delete these pages Radzen will not regenerate them.

1 Like

Good day.
Is possible small example for using in all only roboto font
Best regards

Style ccs root rz text font roboto
Thanks

The built-in material theme uses the roboto font.

1 Like