Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17681] MobileWeb: Custom .woff fonts not rendering on app

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionWon't Fix
Resolution Date2018-04-04T23:32:36.000+0000
Affected Version/sRelease 3.3.0
Fix Version/sRelease 3.3.0
ComponentsMobileWeb
LabelssupportTeam
ReporterMostafizur Rahman
AssigneeChris Barber
Created2014-09-11T17:57:53.000+0000
Updated2018-04-04T23:32:36.000+0000

Description

Issue

When using a custom font in a MobileWeb app the font is not correctly rendered, this used to worked correctly on SDK 3.2.3.GA but stopped working on 3.3.0.GA

Testing

While testing i notice in the index.html that the @font-face is different from 3.2.3.GA than the one in 3.3.0.GA @font-face in index.html SDK 3.2.3.GA
@font-face{font-family:"futurastd-condensed-webfont";src:url("mobileweb/futurastd-condensed-webfont.woff");}
@font-face in index.html SDK 3.3.0.GA
@font-face{font-family:"futurastd-condensed-webfont";url("futurastd-condensed-webfont.woff") format("woff");}
The source parameter is missing causing an error in the CSS and not rendering the font.

Test code


var win = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

var label = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{
		fontSize:20,
		fontFamily:"futurastd-condensed-webfont"},
	textAlign:'center',
	width:'auto'
});

win.add(label);

// open tab group
win.open();

Steps to Repro

1. Run the attached test case for Mobile Web using SDK 3.3.0.GA

Expected Result

The app will display a label with custom font

Actual Result

The app will not display a label with custom font in SDK 3.3.0 but if the test is run with 3.2.3.GA will be displayed correctly.

Attachments

FileDateSize
mobWeb.zip2014-09-11T17:57:54.000+00003162300

Comments

  1. Marco Cota 2014-10-06

    Workaround

    On the index.html generated from deploying the app look for the @font-face CSS without the src parameter and add it in order for the css to correctly locate the file font. Before
       @font-face{font-family:"futurastd-condensed-webfont";url("futurastd-condensed-webfont.woff") format("woff");} 
       
    After
       @font-face{font-family:"futurastd-condensed-webfont";src:url("futurastd-condensed-webfont.woff") format("woff");} 
       
  2. Lee Morris 2017-06-26

    Marking ticket as "Won't Fix" as MobileWeb has been deprecated.
  3. Eric Merriman 2018-04-04

    Closing as will not fix.

JSON Source