Support for Custom/Different Font in PointText Item

204 views
Skip to first unread message

MUKUND THAKARE

unread,
Mar 5, 2021, 2:46:12 AM3/5/21
to Paper.js
Hello Group !!
I have been trying to set the custom font to pointText with the following piece of code - 

var text = new PointText({
    point: [50, 50],
    content: 'The contents of the point text',
    fillColor: 'black',
    fontFamily: 'MotoyaLMaru',
    fontWeight: 'bold',
    fontSize: 25
});

It seems paper.js is denying my request for "MotoyaLMaru" font and rendering the text in default font sans-serif.

I need to support this font to my text, how can I do it ?
Also Can you guys please suggest me any documentation/link were description of how paper.js works with request of different font in explained.

Thanks !!

Samuel ASENSI

unread,
Mar 5, 2021, 3:42:29 AM3/5/21
to pap...@googlegroups.com
Hi,

In order to use custom fonts with Paper.js, you have to declare them first in your CSS.
Then, you have to make sure that the font is loaded before the text is drawn on the canvas, in order to do that, a library like https://github.com/bramstein/fontfaceobserver can greatly help.
Here is the simplest possible example using a Google Font and the linked library to render a custom font with Paper.js: https://jsfiddle.net/xidi2xidi/s98coe2n/4/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://unpkg.com/acorn"></script>
    <script src="https://unpkg.com/paper"></script>
    <script src="https://unpkg.com/fontfaceobserver"></script>
    <style>
        /* Import your font. */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap');

        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        canvas[resize] {
            width  : 100%;
            height : 100%;
        }

    </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script>
    paper.setup('canvas');

    // Initiate font face observer.
    const font = new FontFaceObserver('Roboto', { weight: 900 });
    // When font is loaded...
    font.load().then(function() {
        // ...draw your text.
        new paper.PointText({
            point: paper.view.center,
            content: 'My text in Roboto black italic',
            justification: 'center',
            fontFamily: 'Roboto',
            fontWeight: 900
        });
    });
</script>
</body>
</html>

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/58e78cf0-44f8-433f-ada5-f65c64b3edb3n%40googlegroups.com.


--
    Samuel ASENSI

MUKUND THAKARE

unread,
Mar 5, 2021, 7:43:46 AM3/5/21
to Paper.js
Great !!
That helped and most importantly It is understandable.
Thanks Samuel !!


I wonder if there is any way of doing it without using google API.

Can we use import statement if we have font.ttf file ?
How can I do it if I have .ttf file for font ?

Thanks !!

Samuel ASENSI

unread,
Mar 6, 2021, 3:51:02 AM3/6/21
to pap...@googlegroups.com
You're welcome.

No, the CSS import is not needed at all, this was just a convenient way for me to produce a working demonstration in a jsfiddle environment.
This will also work if you have a simple CSS @font-face declaration for your font (actually, this is exactly what is imported from Google if you look at the imported content).



--
    Samuel ASENSI

MUKUND THAKARE

unread,
Mar 8, 2021, 5:50:29 AM3/8/21
to Paper.js
Grt !!
Hey Samuel !!
I tried the approach mentioned in  https://groups.google.com/g/paperjs/c/g177cBjKTy8  this blog link, it's similar to what you have suggested also and it did worked.
Somehow I did feel a need of fontfaceobserver it worked without using the library.

Since it worked without using the library I had a question in my mind that, does paper.js checks for font in the application/system environment ? and if it found that font then it uses it otherwise it just uses the default font ? 
How does finding font and then assigning it to text mechanism work in paper.js ?


Also please checkout my new question -  https://groups.google.com/g/paperjs/c/6e6r5x2JMEU  
 
Thanks !!

Samuel ASENSI

unread,
Mar 8, 2021, 1:12:48 PM3/8/21
to pap...@googlegroups.com
To clarify how things work, Paper.js is heavily based on the web canvas API, it uses it as its rendering engine.
And as so, the text drawing is made using the canvas text drawing methods.
The font family that you pass to your Paper.js text is then passed to those methods and as you can see from the documentation, they apply the same logic as CSS.
So if your font is loaded at drawing time, then it is used, otherwise, a fallback font is used (if none if provided, the browser default font will be used).

So the question is how to make sure that your font is loaded ?
- you can use the newly experimental CSS Font Loading API, which allow you to load your font programmatically
- you can use your font on an element of the DOM using CSS, which will trigger the font loading

So I guess that if the fontfaceobserver library was not needed in your case, that means that the font is used elsewhere on the page before you draw the text to your canvas.



--
    Samuel ASENSI
Reply all
Reply to author
Forward
0 new messages