3

I am running Node backend in an AWS Lambda environment to create images on a FabricJS canvas. Everything is working fine except the fontFamily of the textboxes in the canvas.

I am storing my in a folder named fonts inside the src folder.

src
|----fonts
     |----fabric.conf
     |----Source
          |----SourceSansPro-Regular.otf
          |----SourceSansPro-Semibold.otf

I create a fonts.conf file as instructed from here: Include custom fonts in AWS Lambda

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
   <dir>/var/task/fonts/</dir>
   <cachedir>/tmp/fonts-cache/</cachedir>
   <config></config>
</fontconfig>

Environment variables are set

FONTCONFIG_PATH="/var/task/fonts"
FONTCONFIG_FILE="/var/task/fonts/fonts.conf"

I attempt to register the fonts and create the canvas, as instructed from here: http://fabricjs.com/fabric-intro-part-4#node

const { fabric } = require('fabric')

fabric.nodeCanvas.registerFont('fonts/Source/SourceSansPro-Regular.otf', {family: 'Source Sans Pro'})
fabric.nodeCanvas.registerFont('fonts/Source/SourceSansPro-Semibold.otf', {family: 'Source Sans Pro Semibold'})

const canvas = new fabric.Canvas('canvas', {})

canvas.loadFromJSON(canvasJson, async () => {
    ...
    canvas.renderAll()
    const dataURL = canvas.toDataURL({
        width: canvas.width,
        height: canvas.height,
        left: 0,
        top: 0,
        format: 'png'
    })
    console.log(dataURL)
})

Here is an excerpt of canvasJson

"objects": [
    ...
    {
        "shadow": null,
        ...
        "type": "textbox",
        ...
        "fontFamily": "Source Sans Pro Semibold",
        ...
    },
    ...
]

The resulting dataURL contains the default font and not the desired font, see image below.

enter image description here enter image description here

Alien13
  • 558
  • 3
  • 8
  • 30
  • A few things stuck our from your example. When calling `registerFont` you are not specifying a `weight` or `style` that triggers a particular font file to be used. Also, when calling `registerFont` you are passing a relative path instead of absolute, you might want to try absolute. You seem to want the bold variant of Source Sans Pro, but `canvasJson` doesn't specify a `weight` value to trigger the Semibold. Finally, how are you loading these fonts, e.g. are you declaring an `@font-face` declaration somewhere in CSS? – morganney Sep 05 '21 at 18:39
  • I think you are very close to solving it. It seems to me that you are almost there. Could you simplify the project and share the source code on a public Github repo so I can help you out with more context? – Mestre San Sep 07 '21 at 13:38
  • Thank you for your answer Morgan, I am currently doing everything in a server-side node environment so I haven't made any declarations, I believe this tutorial http://fabricjs.com/fabric-intro-part-4#node said that it is ok to replace `@font-face` declarations with `registerFont`. So to answer your last question I am only using `registerFont` – Alien13 Sep 07 '21 at 18:29
  • I believe the server finds the directory where the font files are using this relative path. Also, I am not sure how the absolute path would be like. I will try adding a `weight` and `style`attribute and see if it gets any better. – Alien13 Sep 07 '21 at 18:32
  • Thank you for your answer Mestre San, I will just package the code and I can send it to you. – Alien13 Sep 09 '21 at 11:03
  • Hey Mestre San do you have any email or link that I can send you the code through? – Alien13 Sep 15 '21 at 14:59
  • I'm having issues deploying canvas in AWS Lambda, how did you install canvas in Lambda? – Anirudh Nov 29 '21 at 13:59

0 Answers0