CODEWITHSUNDEEP
extjsextjs7
Cloud-Lover
Cloud-Lover

Reputation: 344

ExtJS 7.2 Change entire application "font-family" dynamically

I am currently creating a project in ExtJS 7.2

How can I change the entire application font-family dynamically

Like allowing the user to select the best font by example from drop-down list and that has to be applied to the entire application.

I know that I can create the file {project-folder}\classic\sass\var\all.scss and just update the font-family inside it as the following

$font-family: 'Tahoma' !important;

but how can I change this value dynamicly ?

thanks

Upvotes: 0

Views: 273

Answers (1)

ext-dev
ext-dev

Reputation: 64

You can use Ext.util.CSS to add css rules.

// as no * rule exists, you have to create a new stylesheet
Ext.util.CSS.createStyleSheet("* {font-family: 'Tahoma';}", "some-id")

Then you can update * rule with :

Ext.util.CSS.updateRule('*', "font-family", "Roboto");

Don't use !important here because of font-ext, font-awesome and font-pictos packages

Upvotes: 1

Related Questions