How to change the fonts of all the components inside my panel?

[AesonErryl]

I want to change the fonts of ALL components inside just my panel; this inlcudes the labels, textfields, grids and so on - anything inside the panel. How can I accomplish this using the 'cls' config?

In my JS file, I have:



Ext.define('Tools.view.TimeTracker', {
extend: 'Ext.container.Viewport',
alias: 'widget.viewTimeTracker',


initComponent: function () {
Ext.apply(this, {
region: 'center',
layout: 'fit',
items: [{
xtype: 'panel',
name: 'pnlTimeTracker',
cls: 'pnlTimeTracker', //this is the CLS config for the panel
layout: 'card',
activeItem: 1,


in my CSS file, I have:

.pnlTimeTracker {
font-family: Segoe UI;
}


I have tried this but it does not work.

[skirtle]

You're going to have to dig in with your browser's dev tools to see what CSS rules are determining the fonts for the elements in your page.

There is no magic to change all the fonts. You'll need to overcome the specificity of whatever selectors are currently determining the fonts. You might be able to hack it with something like this:


.pnlTimeTracker * {
font-family: Segoe UI !important;
}

Even if that does work it's a bit evil.