[TIMOB-18853] Android: Custom Fonts not working in Attributed Strings

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2015-04-30T18:17:53.000+0000
Affected Version/s	n/a
Fix Version/s	Release 4.1.0
Components	Android
Labels	label, parity, textarea, textfield
Reporter	Alex Bernier
Assignee	Ashraf Abu
Created	2015-04-10T16:00:49.000+0000
Updated	2015-06-03T18:30:03.000+0000

Description

Problem

The Ti.UI.ATTRIBUTE_FONT part of TIMOB-15998 doesn't appear to be working with custom fonts. TIMOB-15998 didn't demonstrate custom fonts working. The built-in font Roboto and its variants are working, as well as the built-in families monospace and serif. However, custom fonts placed in app/assets/android/fonts as well as app/assets/fonts are not working. Below, I'm expecting to see the first line of text, "Chantelli Antiqua," to be displayed in the custom font, which is more of a serif font than the sans-serif shown. Instead, however, we see the text displayed in the default font.

Test case

var win = Titanium.UI.createWindow({
	backgroundColor : "#ffffff"
});

var scrollView = Ti.UI.createScrollView({
	height : Ti.UI.FILL,
	width : Ti.UI.FILL,
	layout : "vertical"
});

win.add(scrollView);

win.open();

var fonts = ["Chantelli_Antiqua", "serif", "monospace", "sans-serif", "sans-serif-light", "sans-serif-condensed"];

_.each(fonts, function(font) {
	var text = font;

	var attr = Titanium.UI.createAttributedString({
		text : text,
		attributes : [
		{
			type : Ti.UI.ATTRIBUTE_FONT,
			value : {
				font : {
					fontSize : 20,
					fontFamily : font
				}
			},
			range : [0, text.length]
		},
		{
			type : Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
			value : "#000000",
			range : [0, text.length]
		}]
	});

	var label = Titanium.UI.createLabel({
		top : 10,
		left : 10,
		right : 10,
		height : Titanium.UI.SIZE,
		attributedString : attr
	});

	scrollView.add(label);
});

Attachments

File	Date	Size
Chantelli_Antiqua.ttf	2015-04-10T16:00:49.000+0000	21348
Screenshot_2015-04-10-09-31-07.png	2015-04-10T16:32:23.000+0000	74838

Comments

Alex Bernier 2015-04-20

Also seeing this in SDK 4.0.0.Beta3. [~rtlechuga] Do you have a sense for when this might be prioritized? I know you guys are pushing hard for 4.0.0.GA.
Radamantis Torres-Lechuga 2015-04-20

[~athorne] Hello, as you can see in the documentation, this is only for iOS [attributed string ](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.iOS.AttributedString) if you want to achieve something similar with android, you must use HTML inside the label [label](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Label) Best regards
Alex Bernier 2015-04-20

I'm on platform [~rtlechuga]. Attributed string was just brought over to Android and the Ti.UI.iOS.AttributedString was deprecated in favor of Ti.UI.AttributedString. http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.AttributedString. Ti.UI.ATTRIBUTE_FONT is listed as supported on Android since SDK 3.6: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI-property-ATTRIBUTE_FONT
Alex Bernier 2015-04-20

Duplicated by AC-91.
Ingo Muschenetz 2015-04-24

FYI

Ashraf Abu 2015-04-28

PR: https://github.com/appcelerator/titanium_mobile/pull/6808 Put the resource "Chantelli_Antiqua.ttf" at assets/Resources/fonts/ Test Code:

   
   var win = Titanium.UI.createWindow({
   	backgroundColor : "#ffffff"
   });
    
   var scrollView = Ti.UI.createScrollView({
   	height : Ti.UI.FILL,
   	width : Ti.UI.FILL,
   	layout : "vertical"
   });
    
   win.add(scrollView);
    
   win.open();
   
    
      var font = "Chantelli_Antiqua";
   	var text = font;
    
   	var attr = Titanium.UI.createAttributedString({
   		text : text,
   		attributes : [
   		{
   			type : Ti.UI.ATTRIBUTE_FONT,
   			value : {
   				font : {
   					fontSize : 20,
   					fontFamily : font
   				}
   			},
   			range : [0, text.length]
   		},
   		{
   			type : Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
   			value : "#000000",
   			range : [0, text.length]
   		}]
   	});
    
   	var label = Titanium.UI.createLabel({
   		top : 10,
   		left : 10,
   		right : 10,
   		height : Titanium.UI.SIZE,
   		attributedString : attr
   	});
    
   	scrollView.add(label);
   
   	
   	var font1 = "serif";
   	var text1 = font1;
    
   	var attr1 = Titanium.UI.createAttributedString({
   		text : text1,
   		attributes : [
   		{
   			type : Ti.UI.ATTRIBUTE_FONT,
   			value : {
   				font : {
   					fontSize : 20,
   					fontFamily : font1
   				}
   			},
   			range : [0, text1.length]
   		},
   		{
   			type : Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
   			value : "#000000",
   			range : [0, text1.length]
   		}]
   	});
    
   	var label1 = Titanium.UI.createLabel({
   		top : 10,
   		left : 10,
   		right : 10,
   		height : Titanium.UI.SIZE,
   		attributedString : attr1
   	});
    
   	scrollView.add(label1);
   	
   	var text2 = "Chantelli_Antiqua";
   	var label2 = Ti.UI.createLabel({
   	top : 20,
   	font : {
   		fontSize : 50,
   		fontFamily : 'Chantelli_Antiqua'
   	},
   	color : '#d0d',
   	text : text2
   });
   scrollView.add(label2);

Alex Bernier 2015-05-04

Thank you, [~msamah] and [~hpham]! Works great.
Lokesh Choudhary 2015-06-03

Verified the fix. Custom fonts are now working as expected. Closing. Environment: Appc Studio : 4.1.0.201505071004 Ti SDK : 4.1.0.v20150602140423 CLI : 4.0.1 Alloy : 1.6.0 MAC Yosemite : 10.10.3 Appc npm : 4.0.0 Appc CLI : 4.0.1 Node: v0.10.37 Nexus 5 - Android 5.1.1

JSON Source