In Mobile Web "font" property of Ti.UI.Button isn't working properly.
Code below shows how a Label and a Button are being placed in the screen and both of their "font" properties are being set; Label font property works well, but Button's font never gets changed.
*View:*
*Tss file*
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000",
font: {
fontFamily: "Helvetica-Light",
fontSize: 25
}
},
"#button" : {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
borderColor: "transparent",
backgroundColor: "transparent",
font: {
fontFamily: "Helvetica-Light",
fontSize: 25
}
}
This gets generated in the Resources folder as follows:
$.__views.label = Ti.UI.createLabel({
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000",
font: {
fontFamily: "Helvetica-Light",
fontSize: 25
},
id: "label",
text: "This is a label"
});
$.__views.button = Ti.UI.createButton({
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
borderColor: "transparent",
backgroundColor: "transparent",
font: {
fontFamily: "Helvetica-Light",
fontSize: 25
},
id: "button",
title: "This is a button"
});
So it seems font property is being set, BUT when the application runs in a browser, the font of the label gets correctly styled *and* the font of the button remains the same as the default is set.
This is how the style looks in browsers inspector:
*Label style*
element.style {
overflow: visible;
white-space: normal;
color: rgb(0, 0, 0);
font-family: Helvetica-Light;
font-size: 25px;
left: 0px;
top: 0px;
width: 157px;
height: 29px;
}
*Button style (no font-family/font-size generated at all):*
element.style {
overflow: visible;
white-space: normal;
text-align: center;
left: 0px;
top: 0px;
width: 109px;
height: 18px;
}
It's probably "not working" because the browser does not support "Helvetica-Light". If you drop a ttf, otf, or woff formatted version of the "Helvetica-Light" font file in the Resources/fonts folder, it should work. Do not drop in multiple file format versions due to a bug that has been fixed in master and won't be released until 3.3.0.
Eduardo Gomez 2014-03-20
Thanks for provide another way for approaching the issue. Unfortunately, isn't reliably working for me. I've uploaded a screen shoot and test case to demonstrate this.
Does the 3.3.0 fix will also fix the ability to change button's font style?
If I can help on any way, let me know.
Chris Barber 2014-03-31
Chris Barber 2014-03-31
Dupe of TIMOB-16535
Deepti Pandey 2014-05-09
Closing this duplicate issue as Helvetica-Light font is not supported by browser.
Verified with :
Mac :10.9.2
Appcelerator Studio, build: 3.3.0.201405080918
SDK - 3.3.0.v20140508135704
acs-1.0.14
alloy-1.4.0-dev
npm-1.3.2
titanium-3.3.0-dev
titanium-code-processor-1.1.1
Xcode :5.1.1
Moving this ticket to engineering as I can reproduce the issue with following Titanium test:
var win = Ti.UI.createWindow({ backgroundColor: 'white' }); var button = Titanium.UI.createButton({ title: 'Hello', top: 10, width: 100, height: 100, font: { fontFamily: "Helvetica-Light", fontSize: 40} }); button.addEventListener('click',function(e) { Titanium.API.info("You clicked the button"); }); win.add(button); win.open();It's probably "not working" because the browser does not support "Helvetica-Light". If you drop a ttf, otf, or woff formatted version of the "Helvetica-Light" font file in the Resources/fonts folder, it should work. Do not drop in multiple file format versions due to a bug that has been fixed in master and won't be released until 3.3.0.
Thanks for provide another way for approaching the issue. Unfortunately, isn't reliably working for me. I've uploaded a screen shoot and test case to demonstrate this. Does the 3.3.0 fix will also fix the ability to change button's font style? If I can help on any way, let me know.
Dupe of TIMOB-16535
Closing this duplicate issue as Helvetica-Light font is not supported by browser. Verified with : Mac :10.9.2 Appcelerator Studio, build: 3.3.0.201405080918 SDK - 3.3.0.v20140508135704 acs-1.0.14 alloy-1.4.0-dev npm-1.3.2 titanium-3.3.0-dev titanium-code-processor-1.1.1 Xcode :5.1.1