cordova-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Ismael Olusola Jimoh (JIRA)" <j...@apache.org>
Subject [jira] [Commented] (CB-2385) Custom Font Broken for Windows Phone Devices
Date Tue, 12 Feb 2013 13:23:12 GMT

    [ https://issues.apache.org/jira/browse/CB-2385?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13576606#comment-13576606
] 

Ismael Olusola Jimoh commented on CB-2385:
------------------------------------------

Hi Jesse,

Thanks for the reply and sorry for my late response.

A simple example is:

I have a page I want if I click a button, all text within a div would change into my custom
font.

My HTML code is as seen below:
@@@
<!DOCTYPE html>
<html>
	<head>
		<title>Cordova Device Ready Example</title>

		<meta name="viewport" content="width=device-width, height=device-height" />
		<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script src="http://debug.phonegap.com/target/target-script-min.js#font"></script>
    <!--<link href="//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"
rel="stylesheet" title="roboto"/>-->
		<style>
      @font-face{
      font-family:myFont;
      font-style: normal;
      src:url(WorldWideWeb.woff) format('woff');
      }
      @font-face{
      font-family:mySnell;
      font-style: italic;
      src:url(VintageTypewriter-Corona.otf) format('opentype');
      }

    </style>
		<script type="text/javascript" charset="utf-8">
      function Loaded()
      {
        document.addEventListener("deviceready", onDeviceReady, false);
        document.getElementById("para").style.font="20px mySnell";
      }

      function onDeviceReady()
      {
      alert("Device is ready");
      }
      function onPressed()
      {
      //alert('onPress');
      console.log("Your front should change now");
      document.getElementById("para").style.font="20px myFont";
      document.getElementById("para").style.color="red";
      }


    </script>
	</head>
	<body onload="Loaded();">
		<div id="para">
			The Fox Jumped over the fence<br/>
			The Fox Jumped over the fence<br/>
			The Fox Jumped over the fence<br/>
			<button onclick="onPressed();">Change Font</button>
		</div>
	</body>
</html>
@@@
Clicking the button does change the color and font on the web-browser but on the emulator,
only the text's color is changed.

Thanks for the help.

I tried the .woff .otf .eot and .ttf file types. Only the first two worked for me on browser
none worked on the emulator.

Thanks once again.

Ismael
                
> Custom Font Broken for Windows Phone Devices
> --------------------------------------------
>
>                 Key: CB-2385
>                 URL: https://issues.apache.org/jira/browse/CB-2385
>             Project: Apache Cordova
>          Issue Type: Bug
>          Components: WP7, WP8
>    Affects Versions: 2.3.0
>            Reporter: Ismael Olusola Jimoh
>            Assignee: Jesse MacFadyen
>             Fix For: 2.5.0
>
>
> Trying to use custom fonts in my page seems to be broken.
> I have tried the same codes on browser and seems to work well.
> I have tried both using an external URL for the font as well as having the fonts in my
local machine and seems not to work either way.
> Ismael

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira

Mime
View raw message