Results 1 to 2 of 2

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

  1. #1

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

    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.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010


    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts