Character Style: fonts?

1007 views
Skip to first unread message

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>&nbsp;</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
0 new messages