Sencha touch2: How to change the default font to our custom font?

Question

am facing problem while changing the default font to my own custom font like Arial or times new roman. I have followed the tutorials but not able to get that. I have chabged the default theme but could not able to change the default Font. here is code small snippet for your reference. app.scss:

    $base-color: #9284b5; // this worked
    $base-gradient: glossy; // this worked
    $include-default-icons: false;
    $font-family: '../fonts/Candara.ttf'; // this didn't work
   //$font-family:Arial; // this didn't work 
    // The following two lines import the default Sencha Touch theme. If you are building
    // a new theme, remove them and the add your own CSS on top of the base CSS (which
    // is already included in your app.json file).
    @import 'sencha-touch/default';
    @import 'sencha-touch/default/all';

    // Custom code goes here..
    @import 'sencha-touch/default/src/Button';
    @import 'sencha-touch/default/src/Class';
    @import 'sencha-touch/default/src/Button';
    @import 'sencha-touch/default/src/Panel';
    @import 'sencha-touch/default/src/Sheet';
    @import 'sencha-touch/default/src/MessageBox';
    @import 'sencha-touch/default/src/Toolbar';
    @import 'sencha-touch/default/src/carousel/Carousel';
    @import 'sencha-touch/default/src/form/Panel';
    @import 'sencha-touch/default/src/form/FieldSet';
    @import 'sencha-touch/default/src/field/Field';
    @import 'sencha-touch/default/src/field/Checkbox';
    @import 'sencha-touch/default/src/field/Radio';
    @import 'sencha-touch/default/src/field/Search';
    @import 'sencha-touch/default/src/field/Select';
    @import 'sencha-touch/default/src/field/Slider';
    @import 'sencha-touch/default/src/field/Spinner';
    @import 'sencha-touch/default/src/field/TextArea';
    @import 'sencha-touch/default/src/dataview/IndexBar';
    @import 'sencha-touch/default/src/dataview/List';
    @import 'sencha-touch/default/src/picker/Picker';
    @import 'sencha-touch/default/src/plugin/ListPaging';
    @import 'sencha-touch/default/src/plugin/PullRefresh';
    @import 'sencha-touch/default/src/slider/Slider';
    @import 'sencha-touch/default/src/slider/Toggle';
    @import 'sencha-touch/default/src/tab/Panel';

    // Examples of using the icon mixin:
    // @include icon('user');

Am using Sencha touch ver: 2.2.0 sencha cmd: 3.1.0.256. Can any one please help me out ? Thanks.

i followed the below link: http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson11/5.cfm — chipmunk, Jun 28 '13 at 12:39
Could it be [this bug](http://www.sencha.com/forum/showthread.php?261710-font-family-variables-doesn-t-work-since-Touch-2.2)...? — Joachim Isaksson, Jun 28 '13 at 12:42

score 1 · Accepted Answer · answered Jun 28 '13 at 12:53

1

Upgrade to Sencha Touch 2.2.1 and this issue will be solved.

answered Jun 28 '13 at 12:53

Swar

5,473
3
31
43

Sencha touch2: How to change the default font to our custom font?

1 Answers1