Sencha touch2: Как изменить шрифт по умолчанию на наш пользовательский шрифт?

Я столкнулся с проблемой при изменении шрифта по умолчанию на мой собственный шрифт, такой как Arial или Times New Roman. Я следил за учебниками, но не смог этого получить. Я изменил тему по умолчанию, но не смог изменить шрифт по умолчанию. вот небольшой фрагмент кода для справки. приложение.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');

Использую Sencha touch ver: 2.2.0 sencha cmd: 3.1.0.256. Может ли кто-нибудь помочь мне? Спасибо.