Character Style: fonts?

Benjamin Demaree

unread,

Jun 30, 2011, 6:50:00 PM6/30/11

to pap...@googlegroups.com

Hey all,

I'm looking at characterStyle.font and I'm wondering where it gets its fonts, and if it would conceivably be possible to get an @font-face or something in there as well to really style the text elements.

Thanks!

Ben

Benjamin Demaree

unread,

Jun 30, 2011, 7:14:00 PM6/30/11

to pap...@googlegroups.com

Well, I managed it on my own. Sorry to bother. I had been working at it a few days and just solved it.

Sample code:

<head>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&v1' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
   var text = new PointText(new Point(50, 50));
   text.content = 'Hello world.';
   text.characterStyle = {
      fontSize: 50,
      font: 'Lobster Two',
      fillColor: 'black',
   };
</script>
<style type="text/css">
   div{
      font-family: 'Lobster Two';
   }
</style>
</head>

<body>
<div> </div>
<canvas id="canvas" resize keepalive="true"></canvas>
</body>

The key is that to apply the @font-face, you have to style something first (in this case, a space).

Hope this helps someone out!

Ben

Felix Turner

unread,

Sep 9, 2013, 7:07:34 PM9/9/13

to pap...@googlegroups.com

This seems to be a timing issue. If you run the JS code before the font-face has loaded, it won't show up. So another way to handle this is to run your JS code in a

$(window).load function or similar.

Reply all

Reply to author

Forward