Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-18156] MobileWeb: Custom fonts are not working

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2015-04-13T02:59:17.000+0000
Affected Version/sRelease 3.3.0, Release 3.4.0, Release 3.4.1
Fix Version/sRelease 4.1.0
ComponentsMobileWeb
Labelsfont, mobileweb
ReporterShuo Liang
AssigneeChris Barber
Created2014-12-09T08:27:21.000+0000
Updated2015-06-05T22:43:17.000+0000

Description

Problem Description

Custom fonts are not working on MobileWeb, But works well on Android and IOS.

Steps to reproduce

1. Create new mobile project (classic titanium) 2. Add this code:
var win = Ti.UI.createWindow({ 
backgroundColor: 'white', 
layout: 'vertical', 
title: 'Label Demo' 
}); 

var label1 = Ti.UI.createLabel({ 
color: '#900', 
font: { fontFamily: "ShadowsintoLight", fontSize:48 }, 
text: 'A simple label', 
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, 
top: 30, 
width: Ti.UI.SIZE, height: Ti.UI.SIZE 
}); 

var label2 = Ti.UI.createLabel({ 
color:'blue', 
font: { 
fontFamily: "ShadowsintoLight", 
fontSize: 14 
}, 
text: 'A long label with\na few line breaks\nand unicode (UTF8)\nsymbols such as\na white chess piece \u2655\nand the euro symbol \u20ac\nlooks like this!\n', 
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, 
top: 30, 
width: 300, height: 200 
}); 

win.add(label1); 
win.add(label2); 
win.open(); 
3. Create a fonts directory inside Resources 4. copy the attached font to the fonts directory. 5. Select 3.4.1.GA as the Mobile SDK 6. Run in mobile web

Actual Results

The custom fonts are not show.

Expected results

The custom fonts should appear, as used to happen with Mobile SDK 3.2.3.

Extra info

I tested this and the last known working version is Mobile SDK 3.2.3.GA

Attachments

FileDateSize
ShadowsIntoLight.ttf2014-12-09T08:27:21.000+000054304

Comments

  1. Chris Barber 2015-04-03

    Master pull request: https://github.com/appcelerator/titanium_mobile/pull/6759 4_0_X pull request: https://github.com/appcelerator/titanium_mobile/pull/6760 To test, create a Mobile Web app. Inside the "Resources" directory, create a "fonts" directory. Drop in a "woff" and "ttf" font. Give them the same filename. Set the fontFamily on a Ti.UI.Label and build!
  2. Feon Sua Xin Miao 2015-04-13

    PR merged.
  3. Lokesh Choudhary 2015-06-05

    Verified the fix. Custom fonts are displayed successfully on mobile web. Closing. Environment: Appc Studio : 4.1.0.201505071004 Ti SDK : 4.1.0.v20150604094312 CLI : 4.0.2-rc2 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