How to declare app-wide custom font for all text

Question

I already have a custom font put into my app/resources/<platform>/fonts folders and have used it on several UI elements across my app, but is there a way to declare this the default font for text across the whole app? I would assume that this would be done in tiapp.xml maybe? Otherwise the only way I could think of achieving this is setting the font for every element individually in the app.tss, but that quickly becomes tedious and an element could be skipped. I'm sure there has to be a better solution out there.

Answer 1

TSS files are best place to apply custom fonts on app wide text/labels/buttons etc.

This is how you can you can do it:

app.tss

"Label" :   {
    font : {
        fontFamily : 'custom_font_1'  // app->assets->fonts folder
    }
}


".custom_font" :   {
    font : {
        fontFamily : 'custom_font_file'  // app->assets->fonts folder
    }
}

---

ViewName.xml

<Label class="custom_font" text="Hello there!" color="black" />
<Label class="view-class" text="Hello there!" color="blue" />
<Label text="Hello there!" color="red" />

---

ViewName.tss

".view-class" :   {
    font : {
        fontFamily : 'another_font'  // app->assets->fonts folder
    }
}

In this example, we have defined different fonts at 3 places. 2 fonts in app.tss file, and 1 font in ViewName.tss file.

In ViewName.xml file:

• 1st Label will use custom_font class from app.tss
• 2nd Label will use view-class class from its own ViewName.tss
• 3rd Label will use default Label font from app.tss

So, I have presented you different ways to suit every app's requirements. Your particular case is Label 3rd.

Just like you have used Label in app.tss, you can use any Titanium text-type element like TextField, TextArea, Button, etc.

Refer more here: Global Styling & Themes in Titanium