custom fonts in textItem like @font-face?

937 views
Skip to first unread message

sandric

unread,
Jul 12, 2011, 7:21:42 AM7/12/11
to Paper.js
Hi. I wonder, how can I create some text with my custom font. I tried
to run this:

<CODE>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Lines</title>
<script type="text/javascript" src="paper.js"></script>

<style type = "text/css">

@font-face
{

font-family: "Itt";
src: url('42936.ttf') format("truetype");
}

</style>

<script type="text/paperscript" canvas="canvas">

function draw()
{
var text = new PointText(new Point(30, 30));
text.fillColor = 'black';
text.font = 'Itt';

text.content = 'Hello world';
}

draw();
</script>
</head>
<body style='background-color:white'>
<canvas id="canvas" resize></canvas>
</body>
</html>

</CODE>
with no result, It just draws it in default font.

Richard D. Worth

unread,
Jul 12, 2011, 11:40:22 AM7/12/11
to pap...@googlegroups.com

sandric

unread,
Jul 12, 2011, 3:24:54 PM7/12/11
to Paper.js


On Jul 12, 6:40 pm, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> Seehttp://groups.google.com/group/paperjs/browse_thread/thread/99d8eff8b...
thanks, it helped. But, to tell the truth, I'm not quite shure I
understood the method)

Richard D. Worth

unread,
Jul 12, 2011, 4:49:43 PM7/12/11
to pap...@googlegroups.com
On Tue, Jul 12, 2011 at 3:24 PM, sandric <kyryche...@gmail.com> wrote:


On Jul 12, 6:40 pm, "Richard D. Worth" <rdwo...@gmail.com> wrote:
> See http://groups.google.com/group/paperjs/browse_thread/thread/99d8eff8b...
>
> On Tue, Jul 12, 2011 at 7:21 AM, sandric <kyrychenkoan...@gmail.com> wrote:
> > Hi. I wonder, how can I create some text with my custom font.

thanks, it helped. But,  to tell the truth, I'm not quite shure I
understood the method)

You can read more about this issue (which is really a canvas issue, not a paper issue) at


- Richard

MUKUND THAKARE

unread,
Mar 10, 2021, 6:51:42 AMMar 10
to Paper.js
If you can just install the .ttf and use the font family name while creating the pointText would do the job.
There is no need to use @font-face, from my perspective. 

I have observed that in latest version of paper.js.

Thanks !!
Reply all
Reply to author
Forward
0 new messages